Glassmorphism UI

Soft panels, thin edges, quiet glow — glassmorphism that feels like light through glass, not a frosted sticker on every box. Caustica Design is a CSS-first glass UI library with OKLCH tokens and optional React.

What “glass” should feel like

Most glassmorphism tutorials stack the same recipe: blur, white opacity, a thick border, drop shadow. Useful once — then every surface looks like the same card. Screens stop breathing.

Caustica starts from a different picture. A caustic is the bright shape light makes through glass or water. We want that on screen: see-through layers, soft highlights, motion that stays out of the way — what interfaces feel like next, not louder chrome.

Light through glass vs generic glassmorphism

Generic glass often means one CSS trick applied everywhere. Caustica’s glass is a system:

  • OKLCH semantic tokens — color and glass aliases stay calm in light and dark; themes remap purpose, not every primitive.
  • CSS owns the look — class names like .panel, .ui-navbar, and .btn carry blur, rim, and highlight. React is optional for typed behavior.
  • Depth with restraint — prefer a few layered surfaces over nesting many blurred regions. Hosts without backdrop-filter get stronger opaque glass tokens automatically.

So when you search for glassmorphism components or CSS glass effects, you are not only copying a blur snippet — you are installing a design system tuned for translucent UI.

Glass-forward components

Start with surfaces and chrome that carry the glass language, then compose the rest of the kit around them.

  • Panel — primary glass surface for sections and content blocks
  • Navbar — sticky or island chrome with translucent collapse
  • Button — glass secondary by default, solid primary when you need weight
  • Components overview — every primitive by group

Tokens and theming

Glass borders, surfaces, and blur resolve from custom properties. Read the conceptual overview on OKLCH design tokens, then the deep guide on Tokens. Switch light and dark with data-theme — see Theming.

Install and explore