Design for AIGlassmorphism: UI design prompt
Palette, type rules and a pasteable prompt for glassmorphism. Also called frosted glass UI, glass cards, backdrop blur UI, translucent UI. 2020-2023 (Windows Vista Aero and iOS 7 as ancestors; named by Michal Malewicz in 2020).
Traits
- translucent panels (white at 8-20% alpha) over a colourful, blurred background
- `backdrop-filter: blur(16-24px)` is the whole trick; nothing works on a flat background
- 1px light border (white at 25-40%) to fake a glass edge
- soft, wide shadows in a tinted colour, never pure black
- radius 16-24px, generous inner padding
- background carries blurred colour blobs so the blur has something to smear
- type stays crisp and high contrast on top of the glass
Palette
#0f172a page base, #7c3aed and #06b6d4 background blobs, rgba(255,255,255,0.12) glass fill, rgba(255,255,255,0.35) glass edge, #f8fafc text
Type
Manrope or DM Sans for everything; headings 600, body 400 at 16px; avoid thin weights on glass (they vanish against blur)
Do
- put two or three large blurred colour shapes behind the layout so the blur has depth to reveal
- keep glass panels to two levels max: card and a hovering overlay
- test every text colour against the busiest part of the background
Don't
- do not stack glass on glass on glass; it turns to mud
- do not use glass on a plain white or plain black page; there is nothing to blur
- do not forget a solid fallback for browsers without backdrop-filter
Known for it: Apple macOS Big Sur, Microsoft Fluent Acrylic, Stripe dashboards (partial)
CSS seed
:root {
--bg: #0f172a;
--fg: #f8fafc;
--accent: #7c3aed;
--glass: rgba(255,255,255,0.12);
--edge: rgba(255,255,255,0.35);
--radius: 20px;
--shadow: 0 8px 32px rgba(31,38,135,0.37);
--font: 'Manrope',sans-serif
}
Prompt
Build the site in a glassmorphism style. Page background #0f172a with three large blurred radial blobs in #7c3aed, #06b6d4 and #ec4899 (filter: blur(80px), opacity 0.6) placed behind the content. Every card, nav bar and modal is a glass panel: background rgba(255,255,255,0.12), backdrop-filter blur(20px) saturate(160%), 1px border rgba(255,255,255,0.35), border-radius 20px, box-shadow 0 8px 32px rgba(31,38,135,0.37). Text #f8fafc, secondary text rgba(248,250,252,0.7). Font Manrope: headings 600 at 40/28/20px, body 400 at 16px, line-height 1.6. Buttons: solid #7c3aed with white text, radius 12px, hover lifts 2px with a brighter shadow. Spacing on an 8px scale, card padding 24-32px. Provide a solid fallback (rgba(15,23,42,0.85)) when backdrop-filter is unsupported. Motion: 200ms ease-out on hover only; no scroll-triggered animation.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in a glassmorphism style. Page background #0f172a with three large blurred radial blobs in #7c3aed, #06b6d4 and #ec4899 (filter: blur(80px), opacity 0.6) placed behind the content. Every card, nav bar and modal is a glass panel: background rgba(255,255,255,0.12), backdrop-filter blur(20px) saturate(160%), 1px border rgba(255,255,255,0.35), border-radius 20px, box-shadow 0 8px 32px rgba(31,38,135,0.37). Text #f8fafc, secondary text rgba(248,250,252,0.7). Font Manrope: headings 600 at 40/28/20px, body 400 at 16px, line-height 1.6. Buttons: solid #7c3aed with white text, radius 12px, hover lifts 2px with a brighter shadow. Spacing on an 8px scale, card padding 24-32px. Provide a solid fallback (rgba(15,23,42,0.85)) when backdrop-filter is unsupported. Motion: 200ms ease-out on hover only; no scroll-triggered animation.
## Tokens
:root { --bg:#0f172a; --fg:#f8fafc; --accent:#7c3aed; --glass:rgba(255,255,255,0.12); --edge:rgba(255,255,255,0.35); --radius:20px; --shadow:0 8px 32px rgba(31,38,135,0.37); --font:'Manrope',sans-serif }
Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.