Foundation

Glassmorphism

Glass surfaces sit over the mesh background and the marbles. Always pair blur with a 1px inner highlight and a subtle border.

Recipe

Glass surface

Default · blur 20

Glass surface

Strong · blur 28

Glass surface

Glass + glow

Specs

.glass {
  background: hsl(0 0% 100% / 0.06);
  border: 1px solid hsl(0 0% 100% / 0.08);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.06), 0 16px 40px rgba(0,0,0,0.55);
}
.glass-strong {
  background: hsl(0 0% 100% / 0.10);
  border: 1px solid hsl(0 0% 100% / 0.12);
  backdrop-filter: blur(28px) saturate(160%);
}

Layering rules

Never stack two glass surfaces on the same layer — blurring blur is muddy. Use a solid card inside glass instead.
Always put glass over something visually rich (mesh, marble render, hero gradient). Glass over flat surface 1 looks broken.
Borders are always white at 6–12% alpha — never colored. Color belongs in the content, not the chrome.