Framework-agnostic Tailwind plugin + component recipes

Liquid Glass design system

Translucent surfaces with blur, depth, specular highlights, optional grain, and fluid motion-usable with pure HTML + Tailwind utilities.

Core components

Shown in light and dark token sets

Light

default tokens

Glass card

A composable surface primitive with depth + highlight.

blur refraction depth

Modal

example markup

Dark

.dark scope

Glass card

Same markup, dark token variables applied via `.dark`.

blur refraction depth

Typography

No typography plugin required

LIGHT

Type scale + text styles

Headings

Liquid headline

Subhead with soft contrast

Section heading

Small heading

Body

Glass UIs are background-dependent. Use slightly higher surface opacity on busy backdrops and keep line-length comfortable. This system exposes opacity + blur as tokens so you can tune the legibility.

Links are underlined for clarity: learn more.

List

  • Token-driven blur + opacity
  • Layered ambient/specular shadows
  • Reduced-motion safe interactions

Inline code

Compose surfaces with liquid-surface and depth via liquid-depth-*.

“A liquid surface should feel light, soft, and responsive-never loud. Favor subtle highlights, calm motion, and accessible contrast.”
Design guidance (demo)

DARK

Same markup, dark tokens

Headings

Liquid headline

Subhead with soft contrast

Section heading

Small heading

Body

Dark surfaces often want slightly higher opacity and quieter highlights. The same token set adapts via the `.dark` scope.

Keep interactive text obvious: accessible link.

List

  1. Use `text-liquid-text` for titles
  2. Use `text-liquid-text-muted` for body
  3. Use focus rings on all controls

Inline code

Example: bg-liquid-4 for higher contrast.

“Typography is the stabilizer in a translucent system: keep it calm, readable, and predictable.”
Design guidance (demo)

Design tokens

Tokens are shipped as CSS variables (light + .dark) and surfaced through Tailwind theme extensions (colors, radii, shadows, blur, motion).

Blur

xs → xl via CSS vars

md --lt-blur-md

Radii

soft → liquid

Depth

liquid-depth-1 → 5

Plugin primitives

Compose glass quickly with these classes: liquid-surface, liquid-highlight, liquid-grain, liquid-depth-*, liquid-motion.