Glassmorphism

Also called: Frosted UI, Glass UI

Translucent frosted panels floating over vivid colour blobs — depth through blur, not shadow.

“Frosted glass”Soft & DimensionalEra: 2020sDreamyTechyCalmLuxury

glassmorphism / landingEN

glassmorphism / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

Style palettes

UI Lingo pool

Radius sm10pxRadius md14pxRadius lg22pxRadius xl28pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

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.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinPlus Jakarta Sans · 600/700

The quick brown fox

Heading · ThaiAnuphan · 500/600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinInter · 400/500/600

Clear words make shared decisions.

Body · ThaiAnuphan · 300/400/500

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Anuphan is a loopless geometric Thai with the same open, friendly proportions as Plus Jakarta Sans and Inter.

Colour palette

Light

Dark

Design tokens

Radius	`sm 10px · md 14px · lg 22px · xl 28px · pill 999px`
Border	`1px`
Shadow	`0 10px 30px rgba(0,0,0,0.22)`
Display	`clamp(2.75rem, 6vw, 4.75rem)`
Motion	`240ms cubic-bezier(.22,1,.36,1)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Glassmorphism (glassmorphism) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is dark: add class="dark" to <html>.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 22px;
  --background: #E9EDFF;
  --foreground: #141A33;
  --card: rgba(255,255,255,0.55);
  --card-foreground: #141A33;
  --popover: rgba(255,255,255,0.55);
  --popover-foreground: #141A33;
  --primary: #5B4BEA;
  --primary-foreground: #FFFFFF;
  --secondary: #0E7490;
  --secondary-foreground: #FFFFFF;
  --muted: rgba(255,255,255,0.35);
  --muted-foreground: #4A5272;
  --accent: rgba(255,255,255,0.35);
  --accent-foreground: #141A33;
  --destructive: #E11D48;
  --border: rgba(255,255,255,0.7);
  --input: rgba(255,255,255,0.7);
  --ring: #5B4BEA;
  --chart-1: #5B4BEA;
  --chart-2: #0891B2;
  --chart-3: #DB2777;
  --chart-4: #059669;
  --chart-5: #B45309;
  --sidebar: rgba(255,255,255,0.55);
  --sidebar-foreground: #141A33;
  --sidebar-primary: #5B4BEA;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: rgba(255,255,255,0.35);
  --sidebar-accent-foreground: #141A33;
  --sidebar-border: rgba(255,255,255,0.7);
  --sidebar-ring: #5B4BEA;
}

.dark {
  --background: #0B1020;
  --foreground: #F4F6FF;
  --card: rgba(255,255,255,0.08);
  --card-foreground: #F4F6FF;
  --popover: rgba(255,255,255,0.08);
  --popover-foreground: #F4F6FF;
  --primary: #8B7BFF;
  --primary-foreground: #0B1020;
  --secondary: #22D3EE;
  --secondary-foreground: #04121A;
  --muted: rgba(255,255,255,0.04);
  --muted-foreground: rgba(228,233,255,0.72);
  --accent: rgba(255,255,255,0.04);
  --accent-foreground: #F4F6FF;
  --destructive: #FB7185;
  --border: rgba(255,255,255,0.18);
  --input: rgba(255,255,255,0.18);
  --ring: #8B7BFF;
  --chart-1: #8B7BFF;
  --chart-2: #22D3EE;
  --chart-3: #F472B6;
  --chart-4: #34D399;
  --chart-5: #FBBF24;
  --sidebar: rgba(255,255,255,0.08);
  --sidebar-foreground: #F4F6FF;
  --sidebar-primary: #8B7BFF;
  --sidebar-primary-foreground: #0B1020;
  --sidebar-accent: rgba(255,255,255,0.04);
  --sidebar-accent-foreground: #F4F6FF;
  --sidebar-border: rgba(255,255,255,0.18);
  --sidebar-ring: #8B7BFF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Glassmorphism (glassmorphism) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is dark: add class="dark" to <html>.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #E9EDFF;
  --color-surface: rgba(255,255,255,0.55);
  --color-surface-2: rgba(255,255,255,0.35);
  --color-text: #141A33;
  --color-text-muted: #4A5272;
  --color-primary: #5B4BEA;
  --color-on-primary: #FFFFFF;
  --color-secondary: #0E7490;
  --color-on-secondary: #FFFFFF;
  --color-accent: #DB2777;
  --color-border: rgba(255,255,255,0.7);
  --color-success: #059669;
  --color-warning: #B45309;
  --color-danger: #E11D48;
  --color-chart-1: #5B4BEA;
  --color-chart-2: #0891B2;
  --color-chart-3: #DB2777;
  --color-chart-4: #059669;
  --color-chart-5: #B45309;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.12);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.22);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.32);
  --font-heading: "Plus Jakarta Sans", "Anuphan", system-ui, sans-serif;
  --font-body: "Inter", "Anuphan", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #0B1020;
  --color-surface: rgba(255,255,255,0.08);
  --color-surface-2: rgba(255,255,255,0.04);
  --color-text: #F4F6FF;
  --color-text-muted: rgba(228,233,255,0.72);
  --color-primary: #8B7BFF;
  --color-on-primary: #0B1020;
  --color-secondary: #22D3EE;
  --color-on-secondary: #04121A;
  --color-accent: #F472B6;
  --color-border: rgba(255,255,255,0.18);
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #FB7185;
  --color-chart-1: #8B7BFF;
  --color-chart-2: #22D3EE;
  --color-chart-3: #F472B6;
  --color-chart-4: #34D399;
  --color-chart-5: #FBBF24;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Glassmorphism (glassmorphism). Default mode: dark. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.9294,
            1
          ],
          "hex": "#e9edff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff",
          "alpha": 0.55
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff",
          "alpha": 0.35
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.102,
            0.2
          ],
          "hex": "#141a33"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.3216,
            0.4471
          ],
          "hex": "#4a5272"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.2941,
            0.9176
          ],
          "hex": "#5b4bea"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.4549,
            0.5647
          ],
          "hex": "#0e7490"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8588,
            0.1529,
            0.4667
          ],
          "hex": "#db2777"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff",
          "alpha": 0.7
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0196,
            0.5882,
            0.4118
          ],
          "hex": "#059669"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.3255,
            0.0353
          ],
          "hex": "#b45309"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8824,
            0.1137,
            0.2824
          ],
          "hex": "#e11d48"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.2941,
            0.9176
          ],
          "hex": "#5b4bea"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.5686,
            0.698
          ],
          "hex": "#0891b2"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8588,
            0.1529,
            0.4667
          ],
          "hex": "#db2777"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0196,
            0.5882,
            0.4118
          ],
          "hex": "#059669"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.3255,
            0.0353
          ],
          "hex": "#b45309"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0627,
            0.1255
          ],
          "hex": "#0b1020"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff",
          "alpha": 0.08
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff",
          "alpha": 0.04
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9647,
            1
          ],
          "hex": "#f4f6ff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8941,
            0.9137,
            1
          ],
          "hex": "#e4e9ff",
          "alpha": 0.72
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5451,
            0.4824,
            1
          ],
          "hex": "#8b7bff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0627,
            0.1255
          ],
          "hex": "#0b1020"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1333,
            0.8275,
            0.9333
          ],
          "hex": "#22d3ee"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0157,
            0.0706,
            0.102
          ],
          "hex": "#04121a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.4471,
            0.7137
          ],
          "hex": "#f472b6"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff",
          "alpha": 0.18
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.8275,
            0.6
          ],
          "hex": "#34d399"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.749,
            0.1412
          ],
          "hex": "#fbbf24"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.4431,
            0.5216
          ],
          "hex": "#fb7185"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5451,
            0.4824,
            1
          ],
          "hex": "#8b7bff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1333,
            0.8275,
            0.9333
          ],
          "hex": "#22d3ee"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.4471,
            0.7137
          ],
          "hex": "#f472b6"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.8275,
            0.6
          ],
          "hex": "#34d399"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.749,
            0.1412
          ],
          "hex": "#fbbf24"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.22
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 30,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.32
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 24,
            "unit": "px"
          },
          "blur": {
            "value": 60,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Plus Jakarta Sans",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 240,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.22,
      1,
      0.36,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 9
Builder: claude-haiku-5-5
Auditor: claude-opus-5-5

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!