Glassmorphism Design Prompts
AI prompts for creating frosted glass UI effects with backdrop-blur, transparency, and layered depth.
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.
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
Want the complete design system?
StyleKit offers 120+ visual styles, each with complete design tokens, component recipes, and exportable AI Rules.