Customization

Materials, tints and the CSS variables behind the liquid glass.

Customizing Glass Effects

Override transparency, blur, and other glass properties globally or per-component

Materials

Every glass component takes a material prop: regular (default, frosted), clear (barely frosted, most refraction) or tinted (washed with a colour, the primary colour by default).

<Button>Regular</Button>
<Button material="clear">Clear</Button>
<Button material="tinted" tint="#3b82f6">Tinted</Button>

Per-Component Customization

Override the tint colour and frost of a single component with the glass prop:

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function CustomGlassCard() {
  return (
    <Card glass={{ tint: "rgba(139, 92, 246, 0.6)", frost: 0.5 }}>
      <CardHeader>
        <CardTitle>Custom Glass Card</CardTitle>
      </CardHeader>
      <CardContent>
        This card has a violet tint and lighter frost.
      </CardContent>
    </Card>
  )
}

Global CSS Variables

The CSS look comes from the .lg layer in globals.css. Override its variables to restyle every component at once:

:root {
  --lg-rim-hi: rgba(255, 255, 255, 0.8);   /* bright edge of the rim */
  --lg-rim-lo: rgba(255, 255, 255, 0.18);  /* dim edge of the rim */
  --lg-highlight: rgba(255, 255, 255, 0.6); /* inner top highlight */
  --lg-drop: rgba(15, 23, 42, 0.14);       /* drop shadow */
}

/* Per material: wash colour, blur and saturation */
.lg-regular { --lg-base: rgba(255, 255, 255, 0.42); --lg-blur: 16px; --lg-sat: 180%; }
.dark .lg-regular { --lg-base: rgba(255, 255, 255, 0.07); }

Real Refraction with WebGL

Wrap your app in LiquidGlassProvider and components that rest on the backdrop are drawn by a WebGL shader with real refraction, chromatic dispersion and a light-tracking rim. Popovers, menus, dialogs and anything over other content keep the CSS look, and so does everything when WebGL is unavailable or the user prefers reduced transparency.

import { LiquidGlassProvider } from "@/components/ui/liquid/liquid-glass-provider"

export default function Layout({ children }: { children: React.ReactNode }) {
  return <LiquidGlassProvider backdrop="/wallpaper.jpg">{children}</LiquidGlassProvider>
}