Glassmorphism CSS Tutorial: Frosted Glass Effect with backdrop-filter

Glassmorphism css is one of the most visually striking UI trends of recent years. The frosted glass effect css style creates the illusion of translucent panels floating over colorful backgrounds — like frosted glass in architecture. This tutorial explains the full backdrop filter css technique, from the core properties to a complete working example.

What Is Glassmorphism?

Glassmorphism is a UI design trend characterized by:

• Semi-transparency — panels are translucent, revealing colors behind them
• Background blur — content behind the panel is blurred, mimicking frosted glass
• Subtle border — a thin, semi-opaque border catches reflected “light”
• Soft shadow — lifts the element off the background

The effect was popularized by Apple’s macOS Big Sur (2020) and quickly spread across web design.

The Core CSS Properties

backdrop-filter: blur()

This is the heart of the frosted glass effect css. It applies a blur to everything rendered behind the element, not the element itself.

.glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari */
}

The blur radius is in pixels. Values between 8px and 20px work best — lower looks transparent, higher looks opaque.

background: rgba()

A partially transparent background tints the panel while allowing the backdrop blur to show through:

.glass {
  background: rgba(255, 255, 255, 0.15);
}

For dark-themed glass, use a dark base:

.glass-dark {
  background: rgba(15, 23, 42, 0.4);
}

Border with rgba

A thin semi-transparent border adds the reflective rim that makes glass feel real:

.glass {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

box-shadow

A soft shadow lifts the card away from the background:

.glass {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

Full Working Example

Here is a complete HTML and CSS glassmorphism implementation you can copy and paste directly:

<div class="glass-scene">
  <!-- Colorful background blobs -->
  <div class="blob blob-1"></div>
  <div class="blob blob-2"></div>

  <!-- The glass card -->
  <div class="glass-card">
    <h2>Glassmorphism Card</h2>
    <p>A frosted glass effect built entirely with CSS.</p>
    <button class="glass-btn">Get Started</button>
  </div>
</div>

/* Scene / background */
.glass-scene {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #1e1b4b, #312e81, #4c1d95);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Colorful background blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
}

.blob-1 {
  width: 400px;
  height: 400px;
  background: #6366f1;
  top: -100px;
  left: -100px;
}

.blob-2 {
  width: 350px;
  height: 350px;
  background: #ec4899;
  bottom: -80px;
  right: -80px;
}

/* Glass card — the glassmorphism css core */
.glass-card {
  position: relative;
  z-index: 1;
  padding: 2.5rem;
  border-radius: 20px;
  max-width: 380px;
  width: 90%;
  text-align: center;

  /* Frosted glass effect css */
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.glass-card h2 {
  color: #fff;
  font-size: 1.75rem;
  margin: 0 0 0.75rem;
}

.glass-card p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

/* Glass button */
.glass-btn {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 0.65rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

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

Adjusting the Intensity

You can tune four variables to control how “glass-like” the result feels:

Browser Support and the backdrop-filter CSS Property

The backdrop-filter css property is supported in:

• Chrome/Edge — since version 76
• Safari — since version 9 (with -webkit- prefix)
• Firefox — since version 103 (enabled by default)

Always include both -webkit-backdrop-filter and backdrop-filter for maximum compatibility. For unsupported browsers, the element simply renders without blur — it degrades gracefully.

Accessibility Considerations

Glassmorphism can hurt readability. Text on a blurred, semi-transparent panel may not meet WCAG contrast requirements, especially on dynamic backgrounds. Follow these guidelines:

• Check contrast ratios — Use the WebAIM contrast checker. Text should be at least 4.5:1 against the card’s effective background color.
• Avoid small text on glass panels — below 16px, legibility suffers.
• Provide fallback — Detect support with @supports (backdrop-filter: blur(1px)) and offer a fallback with a more opaque background.

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

Summary

The glassmorphism css technique relies on four properties working together: backdrop-filter: blur() for the frosted effect, rgba() background for transparency, rgba() border for the rim, and box-shadow for depth. This frosted glass effect css approach creates visually rich UIs with very little code.

Use our free CSS Glassmorphism Generator to fine-tune blur intensity, transparency, and border values visually — with a real-time preview.