Glassmorphism
Also called: Frosted UI, Glass UI
Translucent frosted panels floating over vivid colour blobs — depth through blur, not shadow.
glassmorphism / landingEN
glassmorphism / landingTH
EN
TH
EN
TH
EN
TH
EN
TH
glassmorphism / componentsEN
glassmorphism / componentsTH
Design keywords
Say these words to ask for this style.
frosted glassbackdrop blurtranslucent panelscolour blobslight edge borderfloating layersdark vivid backdrop
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
Not to be confused with
Liquid Glass →Liquid Glass bends and refracts light with dynamic specular highlights; Glassmorphism is a flat frosted blur.Aurora UI →Aurora is about the flowing gradient background itself; Glassmorphism is about the panels on top of it.Neumorphism →Neumorphism is opaque and extruded from the same colour; Glassmorphism is transparent.
On mobile
Blur is expensive on phones: keep it to the tab bar, sheets and one hero card (12–16px). Use a static gradient image instead of animated blobs.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.
✓ Audited by agent review (3×)
Copied!