Glass UI

Appearance

Light or dark, and the wallpaper the glass refracts.

Colour themes

Hand-picked themes that you can copy and paste into your apps.

Default
Click to select this theme
Apple Glass
Click to select this theme
CSS Code
Copy and paste this into your CSS file
:root {
  --radius: 0rem;
  --primary: oklch(0.5 0.2 260);
  --primary-foreground: oklch(0.9 0.02 260);
  --background: oklch(0.85 0.1 220);
  --foreground: oklch(0.1 0.1 280);
  --card: oklch(0.85 0.1 220);
  --card-foreground: oklch(0.1 0.1 280);
  --popover: oklch(0.85 0.1 220);
  --popover-foreground: oklch(0.1 0.1 280);
  --secondary: oklch(0.5 0.2 260);
  --secondary-foreground: oklch(0.1 0.1 280);
  --muted: oklch(0.85 0 0);
  --muted-foreground: oklch(0.5 0.2 280);
  --accent: oklch(0.5 0.2 260);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.6 0.2 20);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.5 0.2 260);
  --input: oklch(0.5 0.2 260);
  --ring: oklch(0.5 0.2 260);
  
  /* Liquid glass rim, highlight and shadow */
  --lg-rim-hi: rgba(255, 255, 255, 0.8);
  --lg-rim-lo: rgba(255, 255, 255, 0.18);
  --lg-highlight: rgba(255, 255, 255, 0.6);
  --lg-drop: rgba(15, 23, 42, 0.14);
}

/* Regular liquid glass wash and blur */
.lg-regular {
  --lg-base: rgba(255, 255, 255, 0.42);
  --lg-blur: 16px;
}
.dark {
  --primary: oklch(0.5 0.2 260);
  --primary-foreground: oklch(0.9 0.02 260);
  --background: oklch(0.1 0.1 280);
  --foreground: oklch(0.9 0.02 260);
  --card: oklch(0.1 0.1 280);
  --card-foreground: oklch(0.9 0.02 260);
  --popover: oklch(0.85 0.1 220);
  --popover-foreground: oklch(0.1 0.1 280);
  --secondary: oklch(0.5 0.2 260);
  --secondary-foreground: oklch(0.1 0.1 280);
  --muted: oklch(0.85 0 0);
  --muted-foreground: oklch(0.5 0.2 280);
  --accent: oklch(0.5 0.2 260);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.6 0.2 20);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.5 0.2 260);
  --input: oklch(0.5 0.2 260);
  --ring: oklch(0.5 0.2 260);
  
  /* Liquid glass - dark mode */
  --lg-rim-hi: rgba(255, 255, 255, 0.34);
  --lg-rim-lo: rgba(255, 255, 255, 0.06);
  --lg-highlight: rgba(255, 255, 255, 0.16);
  --lg-drop: rgba(0, 0, 0, 0.45);
}

.dark .lg-regular {
  --lg-base: rgba(255, 255, 255, 0.07);
}