🪟 How to Create a Glassmorphism Effect

What Is Glassmorphism?

Glassmorphism is a UI design style characterised by: a frosted/blurred background, semi-transparent background colour, a subtle light border, and soft shadows. It became popular around 2020 with Apple's macOS Big Sur design language.

The Core CSS

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 24px;
}

Background Requirements

Glassmorphism only works when there's something interesting behind the element — a gradient, image, or other content. On a flat solid background it just looks like a plain box.

/* The page/section behind your glass card */
.hero {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  /* OR */
  background-image: url('your-background.jpg');
  background-size: cover;
}

For dark UIs, use a very subtle white or blue-white tint:

/* Dark glassmorphism */
.glass-card {
  background: rgba(14, 22, 40, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}

The Border Detail

A thin semi-transparent border is what gives the glass its realistic edge. Adjust the alpha to make it more or less visible:

/* Light border for dark backgrounds */
border: 1px solid rgba(255, 255, 255, 0.08);

/* Slightly more visible */
border: 1px solid rgba(255, 255, 255, 0.15);

/* Coloured border (e.g. indigo tint) */
border: 1px solid rgba(99, 102, 241, 0.2);

Performance Notes

backdrop-filter is GPU-accelerated but can be expensive if applied to many elements or large areas on low-end devices.

• Avoid applying it to elements that animate frequently
• Use will-change: backdrop-filter only if you need to animate it
• On mobile, consider reducing the blur radius: blur(8px) instead of blur(16px)
• Test on actual mobile devices — blur effects can cause jank on older phones