0Pricing
CSS Academy · Lesson

backdrop-filter for Frosted Glass

Create frosted glass blur effects on elements overlaid on other content using backdrop-filter.

backdrop-filter for Frosted Glass is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is backdrop-filter?

backdrop-filter applies graphical effects to the area behind an element rather than to the element itself. The element must have some transparency (background with alpha < 1 or no background) to reveal the filtered backdrop.

Frosted Glass Effect

The classic frosted glass pattern:

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px;
}

-webkit-backdrop-filter Prefix

Safari requires the -webkit-backdrop-filter prefix. Always include it alongside the standard property for cross-browser support.

Available Filter Functions

backdrop-filter supports the same functions as filter: blur(), brightness(), contrast(), grayscale(), saturate(), hue-rotate(), sepia(), drop-shadow().

.modal-overlay {
  backdrop-filter: brightness(0.5) blur(4px);
  -webkit-backdrop-filter: brightness(0.5) blur(4px);
}

Dark Frosted Glass

A dark variant for overlays and modals:

.dark-glass {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) brightness(0.7);
  -webkit-backdrop-filter: blur(20px) brightness(0.7);
}

Stacking Context Requirement

backdrop-filter creates a stacking context. The element must composite on top of the backdrop — this means it needs to be above other content in the stacking order (not necessarily z-index, but paint order).

Performance of backdrop-filter

Heavy backdrop-filter: blur() is expensive — it forces the browser to render the background in a separate pass. Use blur values of 20px or less for mobile performance. Avoid it on frequently repainted content.

Modal with Frosted Overlay

A modal dialog with frosted glass overlay:

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

Sticky Navigation with Glass

A frosted glass sticky navbar:

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

Browser Support

backdrop-filter is supported in Chrome 76+, Firefox 103+, and Safari 9+ (webkit). Always include the -webkit- prefix. Check caniuse.com for current data and provide an opaque fallback for unsupported browsers.

Opaque Fallback

Provide an opaque background as a fallback for browsers that do not support backdrop-filter:

.glass {
  background: rgba(255,255,255,0.9); /* fallback */
}

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

Quick Check

What must an element have for backdrop-filter to be visible?

Recap

backdrop-filter applies filter effects to what is behind an element. The element needs transparency for the effect to show through. The classic frosted glass uses blur() + saturate(). Always include -webkit-backdrop-filter for Safari. Provide an opaque fallback using @supports.

Frequently asked questions

Is the “backdrop-filter for Frosted Glass” lesson free?

Yes — the full text of “backdrop-filter for Frosted Glass” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “backdrop-filter for Frosted Glass”?

Create frosted glass blur effects on elements overlaid on other content using backdrop-filter. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “backdrop-filter for Frosted Glass” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. filter: blur brightness contrast grayscale
  2. backdrop-filter for Frosted Glass
  3. mix-blend-mode for Layer Blending
  4. isolation Property
← Back to CSS Academy