Glassmorphism Design Prompts
AI prompts for creating frosted glass UI effects with backdrop-blur, transparency, and layered depth.
glassmorphism promptglass effect CSS promptfrosted glass UIglassmorphism Tailwindbackdrop blur designglass card design prompt
About This Topic
Glassmorphism creates a frosted glass effect using CSS backdrop-filter: blur(), semi-transparent backgrounds, and subtle borders. Popularized by Apple's macOS and iOS interfaces, this style creates depth through layered translucent surfaces. The key to effective glassmorphism is a vibrant background (gradient or image) that shows through the blurred glass, creating visual richness without visual clutter.
Prompt Examples
AI Prompt Examples
Copy these prompts to generate Glassmorphism Design Prompts designs with your favorite AI tool.
Glass Card Layout
GeneralCreate a glassmorphism card layout over a gradient background. Background: linear-gradient from #667eea to #764ba2. Cards: background rgba(255,255,255,0.15), backdrop-filter blur(12px), border 1px solid rgba(255,255,255,0.2), border-radius 16px. Each card contains an icon, title, and description. Arrange in a 3-column responsive grid. Add subtle box-shadow for depth. Text in white with varying opacity for hierarchy.
Glass Dashboard for v0
v0Build a glassmorphism dashboard using shadcn/ui. Background with a mesh gradient (purple, blue, teal). All cards use backdrop-blur-xl with bg-white/10 borders border-white/20. Include: floating stat cards, a glass navigation bar at the top, and a profile dropdown with glass effect. Use rounded-2xl for all containers. Text hierarchy through white text opacity levels: headings 100%, body 80%, muted 50%.
Apple Liquid Glass for Cursor
CursorImplement an Apple-inspired liquid glass design system in Next.js with Tailwind. Create a glass() utility that applies: bg-white/10 dark:bg-black/10, backdrop-blur-2xl, border border-white/20, shadow-lg. Build a modal, dropdown, sidebar, and tooltip using this glass treatment. The background should be a gradient with floating colored orbs (CSS radial-gradient) that create dynamic color through the glass effect.
Glass UI for Claude
ClaudeGenerate React components with glassmorphism styling. Create GlassCard, GlassButton, GlassInput, GlassModal, and GlassNavbar components. Each uses: backdrop-filter: blur(16px), background: rgba(255,255,255,0.1), border: 1px solid rgba(255,255,255,0.18). Include hover states that increase background opacity. Support both light glass (white-based) and dark glass (black-based) variants. Use Tailwind CSS with custom utility classes.
Glass Music Player
GeneralDesign a glassmorphism music player card. The album art fills the card background; the control panel sits on top as a glass layer: background rgba(255,255,255,0.12), backdrop-filter blur(20px) saturate(160%), border 1px solid rgba(255,255,255,0.25), border-radius 24px. Progress bar: 4px track at rgba(255,255,255,0.2) with a solid #ffffff fill and a 12px thumb. Track title 18px semibold white, artist 14px at 70% opacity. Play button: 56px solid white circle with dark icon for contrast; skip buttons are glass circles. Ensure all controls have aria-labels and at least 44px touch targets, and keep text over blur at 4.5:1 contrast by darkening the glass behind it if needed.
Glass Pricing Cards for v0
v0Build a glassmorphism pricing section with shadcn/ui. Background: a fixed mesh gradient of #7c3aed, #2563eb, and #0ea5e9 orbs on #0f0a1e. Three tier cards: backdrop-blur-2xl bg-white/10 border border-white/20 rounded-3xl p-8, with the Pro tier using bg-white/15 and a brighter border-white/40 plus a solid white CTA button with #1e1b4b text. Price at 48px tabular-nums in white, features as a list with check icons at 80% opacity. Card hover lifts with translate-y-1 and increases background to /15 over 200ms. Keep body copy at white/85 minimum for contrast and give the section a solid fallback background via @supports not (backdrop-filter: blur(1px)).
Glass Onboarding Flow for Cursor
CursorCreate a 3-step onboarding flow in Next.js with a glassmorphism panel centered over an animated gradient (conic-gradient rotating slowly between #f472b6, #818cf8, #34d399, 30s linear, paused under prefers-reduced-motion). Panel: 480px wide, rgba(255,255,255,0.08) with blur(24px), 1px rgba(255,255,255,0.18) border, 28px radius, 40px padding. Step indicator: three 8px dots, active dot stretches to a 24px pill in white. Inputs are darker glass (rgba(0,0,0,0.2)) so white text hits 4.5:1, with white/90 labels above, never placeholder-only. Buttons: primary solid white with dark text, secondary glass outline. Animate step transitions with a 250ms fade and 16px slide.
Glass Weather Widget for Claude
ClaudeGenerate a React weather widget with glassmorphism styling and TypeScript props for condition, temperature, and hourly forecast. Container: 360px card, background rgba(255,255,255,0.14), backdrop-filter blur(18px), border 1px solid rgba(255,255,255,0.28), border-radius 20px, over a sky gradient that shifts by condition (clear: #38bdf8 to #0369a1; night: #1e293b to #020617). Temperature at 64px light weight, condition label 16px at 85% opacity, hourly row of 6 glass chips (rgba(255,255,255,0.1), 12px radius) with 13px labels. Use SVG weather icons with 1.5px white strokes. Include role=region with an aria-label like 'Current weather', and a solid rgba(30,41,59,0.9) fallback when backdrop-filter is unsupported.
Related Styles
Related Styles
Explore these styles for ready-made tokens and components.
Use Cases
Best Use Cases
Music & Media Players
Album art shows through glass controls, creating an immersive listening experience.
Weather Apps
Weather conditions visible through glass overlays with dynamic sky backgrounds.
Hero Overlays
Glass cards floating over hero images or video backgrounds on landing pages.
macOS/iOS-Style Apps
Desktop and mobile apps that follow Apple's design language with translucent panels.
FAQ
Frequently Asked Questions
What is glassmorphism in web design?
Glassmorphism is a design style that mimics frosted glass using CSS backdrop-filter: blur(), semi-transparent backgrounds (rgba), and subtle light borders. It creates depth through layered translucent surfaces over vibrant backgrounds. The effect became mainstream through Apple's macOS Big Sur and iOS design updates.
How to create glassmorphism with Tailwind CSS?
Use these Tailwind classes: 'backdrop-blur-xl bg-white/10 border border-white/20 rounded-2xl shadow-lg'. For dark glass: 'backdrop-blur-xl bg-black/10 border border-white/10'. The key is having a colorful background behind the glass element. Add 'backdrop-saturate-150' for richer color bleed-through.
Does glassmorphism affect performance?
backdrop-filter can impact rendering performance, especially with large blur values on mobile devices. Mitigation strategies: limit blur to 12-20px, avoid nesting multiple glass layers, use will-change: transform on glass elements, and provide a solid-color fallback for browsers that don't support backdrop-filter. Modern browsers handle it well for typical use cases.
How much backdrop blur should I use for glassmorphism?
The sweet spot is blur(12px) to blur(24px). Below 8px the background stays legible and competes with foreground text; above 30px the surface reads as solid frosted plastic and you lose the glass illusion while paying the full rendering cost. Scale with element size: small chips and buttons look right at 10-12px, cards at 16-20px, full-screen modals and navbars at 20-24px. Pair blur with saturate(150%-180%) so colors bleeding through stay vivid instead of washing out gray. On mobile, drop one step (e.g. 20px to 12px) to protect frame rate.
Why does my glassmorphism effect look muddy or invisible?
Three usual causes. First, the background is too flat: glass needs a colorful gradient or image behind it — over solid white or gray, blur has nothing to diffuse, so add gradient orbs or a mesh background. Second, the fill opacity is wrong: rgba(255,255,255,0.4) or higher hides the background entirely; stay in the 0.08-0.2 range. Third, the border is missing: the 1px solid rgba(255,255,255,0.2) edge is what sells the pane of glass — without it, the card melts into the backdrop. Also confirm backdrop-filter is not being ignored because an ancestor sets overflow with a transform, which breaks it in some browsers.
Want the complete design system?
StyleKit offers 148 visual styles, each with design tokens, component recipes, and exportable AI Rules.