# Glassmorphism > Translucent frosted panels floating over vivid colour blobs — depth through blur, not shadow. - Nickname: Frosted glass - Also called: Frosted UI, Glass UI - Category: Soft & Dimensional - Moods: Dreamy, Techy, Calm, Luxury - Industries: Fintech & Banking, SaaS, AI Products, Web3 & Crypto, Media & Entertainment - Style page: https://uilingo.dev/styles/glassmorphism/ Glassmorphism stacks semi-transparent surfaces (8–20% white) with a strong background blur over a colourful, usually dark, backdrop. A 1px light border and a top inner highlight sell the glass edge. The background does the colour work; panels stay neutral so content remains readable. ## Best for - Fintech and crypto wallets - AI and music apps - Hero sections and overlays - Widgets over imagery ## Avoid for - Text-heavy reading pages - Low-end Android devices (blur is costly) - Strict WCAG contrast contexts ## Do - Keep panels neutral 8–12% white; saturated colour only in the backdrop, primary gradients and one highlighted card - Use 1px rgba(255,255,255,.18) borders and a top highlight - Add a solid fallback when backdrop-filter is unsupported ## Don't - Don’t nest more than 2 backdrop-filter panes; inner chips and inputs use plain translucent fills - Don’t put body text on very busy areas - Don’t use heavy drop shadows ## Audit Passed after 9 rounds · builder claude-haiku-5-5 · auditor claude-opus-5-5 ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Glassmorphism" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line Translucent frosted panels floating over vivid colour blobs — depth through blur, not shadow. Design keywords: frosted glass, backdrop blur, translucent panels, colour blobs, light edge border, floating layers, dark vivid backdrop. ## Visual language Frosted panes of glass floating over a dark navy night sky (#0B1020) lit by three soft pools of colour — violet, cyan and pink — that drift very slowly. The colour lives in that backdrop; ordinary panels themselves are only 8% white, heavily blurred, with a thin bright edge and a light catch along their top, and the backdrop is fixed to the viewport while the glass panels scroll over it. Corners are generously rounded, type is clean and friendly, and depth comes from blur and layering rather than heavy shadow. The mood is calm, techy and premium. ## Signature details (must be visible) - Backdrop: the Mesh gradient effect below — violet (primary), cyan (secondary) and pink (accent) pools at 65% intensity over navy #0B1020, drifting slowly. The demo already mounts it inside the fixed `.ui-bg` layer, so the recipe must not draw it: the effect section below describes what is already there, not something to build. Write no mesh, pools, glows or gradients on `.ui-bg`, body, the page or sections, and paint no opaque background over `.ui-bg`. It is the whole backdrop: add no extra glows, solid section bands or images on top of it. Never put a filter on body or on any ancestor of a glass panel (a filter on an ancestor breaks backdrop-filter). Glass panels scroll over the fixed backdrop - Every large surface (cards, nav, sidebar, list, tab bar, secondary buttons): rgba(255,255,255,0.08) fill + backdrop-filter blur(20px) saturate(160%). At most 2 stacked backdrop-filter panes (e.g. CTA pane → card); inputs, chips and icon tiles inside a card use a plain 10–12% white fill with NO blur of their own - Glass edge: 1px solid rgba(255,255,255,0.18) border plus an inset top highlight `inset 0 1px 0 rgba(255,255,255,.22)` combined with a soft 0 10px 30px rgba(0,0,0,.22) lift. Radii are large: 14px for controls, 22px for cards, 28px for hero panels, 999px for pills and nav - Primary actions use a 135° violet #8B7BFF → cyan #22D3EE gradient with dark text and a coloured glow `0 8px 24px` primary at 45% (60% and 32px on hover) - Display headline filled with a vertical text gradient, exactly: `background: linear-gradient(180deg, #F4F6FF 30%, rgba(244,246,255,.55)); -webkit-background-clip: text; background-clip: text; color: transparent`. The lower half fades into the backdrop; measure contrast against the glow-lit backdrop at the darkest point under the headline (≥4.5:1), not against flat navy, and do not fade further - Spacing scale (8px × 1.05 density): 8 / 17 / 25 / 34 / 50 / 67 / 101px for padding, gaps and section spacing - Eyebrow pill: 6px 14px padding, 999px radius, rgba(255,255,255,.10) fill, 1px glass border and its own 12px blur; its text is #F4F6FF (set the colour: never leave it the primary violet, which is unreadable on glass). The same pill labels the related-article cards - Saturated colour is allowed only in the backdrop, primary gradient buttons/switch/progress fills, solid badges, the one highlighted card and the CTA tint. Every other panel stays 8% white ## Design tokens — use these exact values Colours (dark mode): - background #0B1020 - surface rgba(255,255,255,0.08) - surface-2 rgba(255,255,255,0.04) - text #F4F6FF - text-muted rgba(228,233,255,0.72) - primary #8B7BFF (text on it #0B1020) - secondary #22D3EE (text on it #04121A) - accent #F472B6 - border rgba(255,255,255,0.18) - success #34D399 · warning #FBBF24 · danger #FB7185 - chart series #8B7BFF, #22D3EE, #F472B6, #34D399, #FBBF24 Radius: sm 10px, md 14px, lg 22px, xl 28px, pill 999px Border width: 1px Shadows: sm `0 2px 8px rgba(0,0,0,0.12)`, md `0 10px 30px rgba(0,0,0,0.22)`, lg `0 24px 60px rgba(0,0,0,0.32)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 240ms cubic-bezier(.22,1,.36,1) ## Typography (Latin + Thai) - Headings: Plus Jakarta Sans 600/700 with Thai fallback Anuphan 500/600/700 - Body: Inter 400/500/600 with Thai fallback Anuphan 300/400/500 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700&family=Inter:wght@400;500;600&family=Anuphan:wght@300;400;500;600;700&display=swap - CSS stacks: heading `"Plus Jakarta Sans", "Anuphan", system-ui, sans-serif`; body `"Inter", "Anuphan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 6vw, 4.75rem), heading weight 700, heading tracking -0.03em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Anuphan is a loopless geometric Thai with the same open, friendly proportions as Plus Jakarta Sans and Inter. ## Components - Primary button: violet→cyan 135° gradient, no border, #0B1020 text, coloured glow shadow that grows on hover; 240ms cubic-bezier(.22,1,.36,1) - Secondary button: on the page it is a glass pane (8% white, blur 20px, 1px rgba(255,255,255,.18) border, top highlight) with light text; inside a glass card it uses a plain rgba(255,255,255,.10) fill with no blur, like chips. Ghost buttons gain a 10% white fill on hover - Card: glass pane at 22px radius with the edge highlight; the highlighted/pricing card instead uses `linear-gradient(135deg, rgba(139,123,255,.55), rgba(244,114,182,.40))` (alpha values, not mix ratios) so the colour glows from within - Nav: a floating pill-shaped glass bar (999px radius) inset from the page edges, not a full-width strip - Inputs and chips: on the page they are glass panes with a quieter inset highlight rgba(255,255,255,.12); inside a card they are a plain rgba(255,255,255,.10) fill with no blur of their own. The active chip becomes 90% white with dark #0B1020 text. Icon tiles and step numbers: rgba(255,255,255,.12) squares with the 1px glass border, icon in the text colour (plain fill, never their own blur) - Badges: 12% white fill + glass border, text tinted success/warning/danger; the solid badge is a violet→pink gradient with white text. Switches and progress: 12–16% white track; the checked state / fill is the violet→cyan gradient - Brand and colour accents: the logo mark (`.ui-logo`) and the active onboarding dot (`.ui-dots > span:first-child`) are filled with the violet→cyan 135° primary gradient (`.ui-logo` icon #0B1020) — never a plain glass or white tile. `.ui-select` keeps the base chevron: set its fill with `background-color`, never the `background` shorthand, which erases the chevron's background-image - Sidebar active item: 12% white fill with an inset top highlight, no coloured bar. Mobile tab bar: floating glass pill; the active icon turns violet with an 8px violet drop-shadow glow - Showcase: a copy column (glass eyebrow pill, h2, lead, checklist with 12%-white icon tiles) beside one large 28px-radius glass panel holding a product mock - CTA block: `background: linear-gradient(135deg, rgba(139,123,255,.45), rgba(34,211,238,.35)); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 24px 60px rgba(0,0,0,.32)`, with a #FFFFFF button and #0B1020 text - Chart lines glow with a 6px drop-shadow in their own colour; area fills fade to transparent. Extra colours: Buttons inside the highlighted card stay the violet→cyan primary; text on the tinted card is #F4F6FF. No-blur fallback surface: solid color-mix(in srgb, #0B1020 88%, #fff 12%) (≈#282C3B) - Chat bubbles: incoming = a plain rgba(255,255,255,.10) pane with the 1px rgba(255,255,255,.18) glass border and the inset top highlight, NO blur of its own (a chat has many bubbles), 22px radius with the tail corner (bottom-left) at 8px; outgoing = the violet→cyan 135° primary gradient with #0B1020 text, no border, tail bottom-right, with the primary glow at 35%. Meta (time, ticks) 0.7rem at 70% opacity. An attachment card inside an incoming bubble is a 12%-white tile with the glass border and no blur; inside the outgoing gradient bubble it is a 22%-white tile whose title and meta stay #0B1020 (70% for the meta) — never white text on the light gradient. Quick replies are glass pills; the composer is a glass pill input with a round gradient send button - Sign-in: one centred glass card (28px radius, blur 24px, glass edge and lift shadow) floating over the backdrop, with the gradient-filled title, inputs on 10% white, a full-width gradient primary button, glass secondary "continue with" buttons, and the "or" divider as a 1px rgba(255,255,255,.18) rule with its label on no fill. The passkey button's fingerprint icon is solid #F4F6FF (the full text colour, never muted or translucent) at 20px, so its thin Material strokes stay legible - Segmented control (`.ui-segmented`): keep the base full-width glass track with equal flex columns — never `width: fit-content`; active segment is a translucent rgba(255,255,255,.18) pill with light text. Only the settings `.ui-tabs` are a fit-content pill with a 90% white active tab. - Settings: the glass sidebar from the dashboard; each settings group is a glass card with 1px rgba(255,255,255,.12) row dividers and gradient-checked switches; tabs are a glass segmented pill with the active tab 90% white with #0B1020 text. The danger button is solid danger #FB7185 with #0B1020 text - States (empty, error, 404) and alerts: each state is a glass card with a 64px rgba(255,255,255,.12) icon tile (glass border, icon in the text colour), a 700 title, muted copy and one gradient primary action. Alerts are 10% white panes with the glass border; only the icon (and a `strong` title, if any) is tinted success/warning/danger, while the message text (`.ui-small`) stays #F4F6FF — never a solid colour block - Article: the pull-quote keeps a 4px cyan left rule with no panel behind it; the inline figure and alternating art are glass panes (6% white fill, 1px glass border, blur 8px) holding two soft radial pools, violet rgba(139,123,255,.7) top-left and cyan rgba(34,211,238,.55) bottom-right, never an opaque gradient fill; related-article art keeps the demo's hue rotation — never set `filter: none` on `.ui-figure__art`. ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: centred headline with the product visual below it. Navigation: pill style. Sections in order: hero → logos → features → showcase → stats → testimonials → pricing → cta. Feature section as bento. Centred hero (the product mock appears ONCE, below the copy): a small glass eyebrow pill that hugs its label (width: fit-content), a two-line gradient-filled headline, a muted lead and a gradient + glass button pair, floating pill nav above. Below the copy a large glass chart panel sits beside two stacked glass stat cards, all overlapping the colour glows. Logos: 5–6 fictional wordmarks in Plus Jakarta Sans 600 ~1.1rem at text-muted, over the backdrop with no panel. Features are a 4-column bento of 6 glass cards: card 1 spans 2×2 and holds a mini glass chart (its content is only an icon, title and text, so draw the chart in CSS on a pseudo-element across the lower half of the card: a violet→cyan area shape cut with clip-path over a 12%-white panel with the glass border), card 4, 5 and 6 span 2 columns, so all 3 rows fill with no holes; the glows behind tint each card differently. Stats: 4 glass cards in a row, value 2.5rem 700. Testimonials: 3 glass cards, each with a 40px cyan→violet gradient avatar. Pricing: 3 glass cards, the middle one highlighted with the violet→pink tint. The CTA is the gradient-tinted glass block with a solid white button. Footer: no panel, a 1px rgba(255,255,255,.18) top rule and muted links over the backdrop. Section backgrounds are never solid bands — the single continuous backdrop runs behind the whole page. Dashboards (and settings) use a glass sidebar and glass widgets on the same glowing navy: the sidebar is a full-height column flush with the left and top edges (no margin, no outer radius, a 1px glass right edge), and the topbar is a full-width glass strip with a 1px bottom rule — only the marketing `.ui-nav` is a floating pill. Thai headlines: wrap Thai phrases in white-space:nowrap spans so 2-line headlines and h2s never orphan a word. Mobile nav: below 768px the pill keeps logo + primary CTA and moves links into a hamburger that opens a glass sheet. Sign-in, settings and states pages use the same backdrop and floating pill nav, with every container a glass pane. ## Icons - Library: Material Symbols (Apache-2.0, https://fonts.google.com/icons), variant "Rounded". Every icon comes from this library in this variant: do not mix libraries, draw icons or use emoji. - Package: the SVG files of @material-symbols/svg-400 inlined. SVG path in @material-symbols/svg-400: `rounded/{name}.svg`. - Paint: filled icons — fill="currentColor", so they take the text colour. - Usage: Rounded outlined at weight 400: 20px in buttons and list rows, 24px in the tab bar and icon tiles. Icons take the text colour; the active tab icon turns violet with its 8px glow. ## Background effect: the "Mesh gradient" effect (`mesh-gradient`) Family: Gradients · pure CSS. Four soft pools of colour blend into each other and drift slowly. ### Look A soft mesh gradient: four large pools of token colour blend into one another across the page and drift very slowly, as if the colour were breathing. Smooth everywhere, with no edges or stripes, like a modern app splash screen. ### Parameters (current values) - Speed `--fx-speed`: 0.4 (range 0.1–2) - Intensity `--fx-intensity`: 0.65 (range 0.2–1) - Colour A `--fx-color-a`: the `primary` colour token, `var(--c-primary)` - Colour B `--fx-color-b`: the `secondary` colour token, `var(--c-secondary)` - Colour C `--fx-color-c`: the `accent` colour token, `var(--c-accent)` - Background `--fx-color-bg`: the `bg` colour token, `var(--c-bg)` ### Recipe - The element: `background-color: var(--fx-color-bg)`. Let `mix(X)` stand for `color-mix(in srgb, var(--fx-color-X) calc(var(--fx-intensity) * 100%), transparent)`. - `::before` (`content: ''; position: absolute; inset: -25%`, oversized so drifting never shows an edge): `background: radial-gradient(40% 50% at 22% 28%, mix(a), transparent 70%), radial-gradient(45% 45% at 78% 22%, mix(b), transparent 70%), radial-gradient(50% 55% at 70% 78%, mix(c), transparent 70%), radial-gradient(40% 40% at 26% 78%, mix(b), transparent 70%)`. - `::after` (same box, `opacity: 0.6`): two more pools, `radial-gradient(35% 40% at 50% 50%, mix(c), transparent 70%)` and `radial-gradient(30% 35% at 85% 60%, mix(a), transparent 70%)`. - Inside `@media (prefers-reduced-motion: no-preference)`: `::before` runs keyframes `fx-mesh-drift` (0% `transform: translate(0, 0) rotate(0deg) scale(1)`; 50% `translate(4%, -3%) rotate(8deg) scale(1.06)`; 100% `translate(-3%, 4%) rotate(-6deg) scale(0.98)`) for `calc(30s / var(--fx-speed))`, `ease-in-out`, `infinite alternate`; `::after` runs the same keyframes for `calc(42s / var(--fx-speed))` in `alternate-reverse`. - Animate only `transform` (never `background-position` or the gradients) so it stays cheap. ### CSS fallback It is pure CSS: the still state, before the animation moves, is the whole effect. ### Runtime rules - Mount it in one element that fills a fixed, `pointer-events: none`, `aria-hidden` layer behind the page content; every parameter above is a CSS custom property on that element. - Colours come only from the colour-token variables above (mix them with `color-mix()` or alpha), never hard-coded hex, so the effect follows any palette and light or dark mode. - CSS only: gradients, `mask`, pseudo-elements and inline `data:image/svg+xml` (no `