The Complete Glassmorphism CSS Guide

What is Glassmorphism?

Glassmorphism is a design style that mimics the appearance of frosted glass. Elements appear semi-transparent, allowing background content to show through with a blur effect. The key visual characteristics are a semi-transparent background color, a backdrop blur filter, a subtle border (often white/light), and layered depth with content visible behind the element.

The effect relies primarily on two CSS properties working together (experiment with our Glassmorphism Generator): background with an alpha-transparent color and backdrop-filter: blur() to blur whatever sits behind the element.

The Core CSS

At its simplest, glassmorphism requires just three CSS properties:

.glass-card {
  /* Semi-transparent background */
  background: rgba(255, 255, 255, 0.1);

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

  /* Subtle border for edge definition */
  border: 1px solid rgba(255, 255, 255, 0.18);

  /* Rounded corners enhance the effect */
  border-radius: 16px;
}

Choosing the Right Background

Glassmorphism only works when there's something interesting behind the glass element. A solid-color page background won't produce any visible effect. You need contrasting content — gradients, images, colored shapes, or other UI elements behind the glass card.

/* Good: gradient background with colored shapes */
.page-bg {
  background: linear-gradient(135deg, #1a1a3e, #2d1b4e);
  position: relative;
}
.page-bg::before {
  content: '';
  position: absolute;
  top: 20%; left: 10%;
  width: 300px; height: 300px;
  background: #7c6fff;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
}

The blur radius in backdrop-filter controls how frosted the glass appears. Lower values (4-8px) create a subtle, almost transparent effect. Higher values (16-24px) create a heavily frosted look. Values between 10-16px tend to hit the sweet spot for most UI applications.

Borders & Glow Effects

The border is crucial to glassmorphism — it defines the edge of the glass and adds to the realism. A semi-transparent white border on the top and left edges mimics how light catches real glass:

/* Enhanced glass with directional light */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

Accessibility Considerations

Glassmorphism presents real accessibility challenges. The semi-transparent backgrounds and blurred content behind text can significantly reduce readability, especially for users with low vision.

• Contrast ratios: Text on glass elements often fails WCAG contrast requirements. Always check your contrast ratios with tools like the WebAIM contrast checker. You may need to increase background opacity or add a subtle dark overlay.
• Background opacity: For text-heavy glass elements, use rgba(255, 255, 255, 0.15) as a minimum background opacity on dark backgrounds, or higher if contrast is still insufficient.
• Reduced motion: Consider reducing or removing backdrop-filter effects for users who prefer reduced motion, as the blur effect can sometimes cause visual discomfort.
• Fallback: Provide a solid background color as a fallback for browsers that don't support backdrop-filter.

/* Accessible glassmorphism with fallback */
.glass-card {
  background: rgba(30, 30, 60, 0.85); /* fallback */
}

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

@media (prefers-reduced-motion: reduce) {
  .glass-card {
    backdrop-filter: none;
    background: rgba(30, 30, 60, 0.9);
  }
}

Browser Support

backdrop-filter is supported in all modern browsers: Chrome 76+, Firefox 103+, Safari 9+ (with prefix), and Edge 79+. Safari was actually the first browser to support it and still requires the -webkit- prefix.

Firefox was the last major browser to add support (in version 103, released 2022), so if you need to support older Firefox versions, the @supports fallback pattern shown above is essential.