The complete guide to glassmorphism

What is glassmorphism?

Glassmorphism mimics a frosted-glass pane over a colorful background: transparency, blurred backdrop and a thin light border. Popularized by macOS and Windows, it brings depth and elegance.

The base recipe

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 18px;
}

The key ingredients

• backdrop-filter: blur(): blurs whatever sits behind the element.
• Semi-transparent background: an opacity of 0.15 to 0.35 looks best.
• Light border: simulates the reflection on the glass edge.

The pitfall to avoid

The effect is only visible when there’s colorful content behind the element. On a flat same-color background, the glass disappears. Always place your card over an image or gradient.

Browser compatibility

backdrop-filter is supported by recent Chrome, Edge, Firefox and Safari (with the -webkit- prefix). Provide a fallback: a more opaque background color for older browsers.

@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(255, 255, 255, 0.85); }
}

Accessibility

Frosted glass can hurt readability. Boost text contrast, add a text shadow if needed, and test on both light and dark backgrounds.

Generate your glass

Tune blur, transparency and border live with our glassmorphism generator, then copy ready-to-use CSS.

Discover our free CSS tools