Glassmorphism CSS Tutorial: Frosted Glass UI

What Is Glassmorphism?

Glassmorphism is a UI design style characterized by:

• A semi-transparent background with frosted blur
• A subtle border visible against the blurred background
• A colorful, vibrant backdrop that shows through

It was popularized by Apple's macOS Big Sur in 2020 and has since spread throughout web UI design.

The Four CSS Properties That Create the Effect

1. backdrop-filter: blur()

This is the core property. It applies a blur effect to everything behind the element, creating the frosted glass illusion:

backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); /* Safari */

Values between 8px and 24px produce the best results. Below 8px looks too sharp; above 24px looks muddy.

2. Semi-transparent background

The element itself needs a translucent background so the blurred content shows through:

background: rgba(255, 255, 255, 0.12); /* Light glass */
/* or for dark glass: */
background: rgba(0, 0, 0, 0.25);

3. Subtle border

A thin, semi-transparent white border defines the glass edge against the background — this is what makes it look physically real:

border: 1px solid rgba(255, 255, 255, 0.2);

4. Border radius

Glassmorphism almost always uses rounded corners. They soften the element and reinforce the "physical material" feeling:

border-radius: 16px;

The Complete Glassmorphism Card

.glass-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  padding: 1.5rem;
}

Critical Requirement: You Need a Colorful Background

Glassmorphism only works when there's something interesting blurring behind the element. On a white or solid dark background, backdrop-filter: blur() has zero visible effect. You need:

• A colorful gradient background
• Background blobs or shapes
• A photograph or illustration

/* Parent container needs a rich background */
.glass-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* or with floating blobs */
  position: relative;
  overflow: hidden;
}

Dark Mode Glassmorphism

For dark interfaces, increase the white alpha slightly and add a colored tint:

.glass-card--dark {
  background: rgba(15, 15, 30, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

Performance Considerations

backdrop-filter triggers compositing and can be expensive on low-end devices. Avoid using it on many simultaneous elements or elements that animate. Use will-change: backdrop-filter sparingly — only right before an animation begins.

Browser Support

As of 2026, backdrop-filter has 97%+ global browser support. The -webkit- prefix is still needed for Safari. You can safely use it in production with a graceful fallback for the rare unsupported case:

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