Interactive lab

Glassmorphism Explained

Glassmorphism is the frosted glass effect you see across modern interfaces. It comes from one CSS property, backdrop-filter, applied with a blur. Here is the effect in action, with the exact CSS behind it.

See it, copy it

The Effect

This card uses glassmorphism

Glassmorphism is that frosted-glass effect you see everywhere now (thanks, Apple). It uses backdrop-filter: blur() to blur whatever is behind an element.

The CSS magic

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

Why it works: transparency + blur creates visual hierarchy without blocking content.

When to use: modals, navigation overlays, tooltips.

Browser support: works in all modern browsers. Safari needs -webkit-backdrop-filter.

← Back to the lab