Glassmorphism Design Prompts

Create 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.

Build 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%.

Implement 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.

Generate 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.

Design 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.

Build 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)).

Create 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.

Generate 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.