Glassmorphism CSS Tutorial: Build Stunning Frosted Glass UI

What Is Glassmorphism?

Glassmorphism is a UI design style that mimics frosted glass surfaces. Elements appear semi-transparent with a blurred view of whatever sits behind them, creating the illusion of depth without heavy shadows. The trend surged in popularity when Apple introduced it in macOS Big Sur (2020) and it has remained a staple of premium digital products ever since.

The look is defined by four characteristics: a translucent background, a blur applied to content behind the element, a subtle border that catches light, and a soft drop shadow to lift the card off the surface.

Core CSS Properties

Four properties do the heavy lifting. Understanding each one is essential before combining them.

1. backdrop-filter: blur()

This is the star of the show. It blurs everything rendered behind the element - not the element's own content. Values between 8pxand 20px produce the most realistic frosted-glass look.

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

2. Semi-transparent rgba Background

The element must be translucent so the blurred background shows through. Light glass uses white at 10–25% opacity; dark glass uses black or dark hues at similar opacity.

/* Light glassmorphism */
background: rgba(255, 255, 255, 0.18);

/* Dark glassmorphism */
background: rgba(15, 15, 25, 0.35);

3. Subtle Border

A 1px semi-transparent white border simulates the light catching the edge of a glass surface.

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

4. Soft Box Shadow

A diffuse shadow beneath the card grounds it in space without fighting the translucent look.

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);

Browser Support

backdrop-filter has strong modern browser support (covering over 96% of global users as of 2026), but still needs the -webkit- prefix for Safari.

Always include both backdrop-filter and -webkit-backdrop-filter for maximum compatibility.

Step-by-Step: Building a Glass Card

A glass element only works when placed on top of a colorful or photographic background. The wrapper element creates that background.

HTML Structure

<div class="glass-wrapper">
  <div class="glass-card">
    <h2>Welcome back</h2>
    <p>Your dashboard is ready.</p>
    <button class="glass-btn">Get Started</button>
  </div>
</div>

Full CSS

/* 1. Colorful background wrapper - glass needs something to blur */
.glass-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* 2. The glass card */
.glass-card {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  padding: 2.5rem;
  max-width: 400px;
  width: 100%;
  color: #fff;
}

/* 3. Glass button */
.glass-btn {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  color: #fff;
  padding: 0.6rem 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.glass-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

Light vs Dark Glassmorphism

The same blur technique produces distinct personalities depending on whether you use white or dark glass.

.glass-light {
  background:
    rgba(255, 255, 255, 0.18);
  border:
    1px solid
    rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter:
    blur(12px);
}

.glass-dark {
  background:
    rgba(10, 10, 20, 0.4);
  border:
    1px solid
    rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter:
    blur(16px);
  color: #e2e8f0;
}

Common Mistakes to Avoid

When to Use (and Avoid) Glassmorphism

/* Respect user accessibility preferences */
@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(30, 30, 50, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}