🧊

CSS Backdrop Filter

Build frosted-glass and glassmorphism effects with backdrop-filter. Tune blur, saturation, brightness, contrast and a layered tint overlay over a live background — then copy the CSS.

Backdrop Controls

px
%
%
%
%
deg
%
%
%

Glass Overlay

px
%

Live Preview

Glassmorphism

backdrop-filter applied to the background behind this card

Sample background — backdrop-filter applied to the glass card in real time

Generated CSS

.glass {
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: rgba(255, 255, 255, 0.20);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

The -webkit-backdrop-filter line is included for Safari support. By default only non-default filter functions are output — toggle "Show all" to include every function.

Glass Recipes

Backdrop Filter Reference

blur(px)

Blurs whatever is behind the element. The core of every frosted-glass effect.

saturate(%)

Boosts the colour of the backdrop. 150–200% gives glass a lively, premium feel.

brightness(%)

Lightens or darkens the backdrop. Lower values help white text stay readable.

contrast(%)

Adjusts the contrast of the content behind the element.

tint overlay

A semi-transparent background is required — backdrop-filter shows nothing on a fully opaque element.

grayscale / hue-rotate / invert / sepia

Extra colour effects you can layer onto the backdrop for creative looks.

CSS Backdrop Filter — design frosted-glass effects with live preview

🧊 Glassmorphism ⚡ Live Preview 🦾 -webkit- Fallback 📋 Copy CSS

About CSS Backdrop Filter

The CSS backdrop-filter property applies graphical effects — blur, saturation, brightness, contrast and more — to the area behind an element, rather than to the element itself. This is what makes the popular glassmorphism (frosted glass) look possible: a translucent card that blurs and tints whatever scrolls underneath it.

This CSS Backdrop Filter generator lets you dial in every backdrop function with sliders and watch a real glass card update over a live background image. It also handles the two pieces people forget: a semi-transparent background tint (without it, backdrop-filter shows nothing) and the -webkit-backdrop-filter prefix needed for Safari.

Everything runs entirely in your browser — no server, no uploads, no sign-up required. It pairs naturally with the filter generator and mask generator for layered UI work.

How to Use CSS Backdrop Filter

  1. 1 Start with a recipe — click a Glass Recipe (Frosted, iOS Glass, Dark Glass, Vivid, Subtle, Heavy Blur) to load a tuned combination of blur, saturation and tint as a starting point.
  2. 2 Adjust the backdrop sliders — tune blur, saturate, brightness and contrast. The glass card in the Live Preview updates instantly over the background image.
  3. 3 Set the glass overlay — pick a tint color and opacity, a border radius, and toggle the subtle white border. The semi-transparent tint is what reveals the blurred backdrop.
  4. 4 Copy the CSS — the Generated CSS panel outputs a ready .glass rule including the -webkit- fallback. Toggle Show all to include every filter function.
  5. 5 Apply it over content — give the parent a colorful background or image, then add the .glass class to a child element. The effect only appears when there is something behind it.

Common Use Cases for Backdrop Filter

Glassmorphism Cards

Translucent cards and panels that blur a colorful background — the signature modern dashboard and landing-page look.

Sticky Navigation Bars

A frosted header (backdrop-filter: blur(12px) saturate(160%)) keeps content readable as the page scrolls beneath it.

Modals & Overlays

Blur the page behind a dialog to focus attention, instead of a flat dark scrim.

Readable Text Over Images

Lower brightness on a blurred backdrop so white captions stay legible over busy photos.

Media Player Controls

Floating control bars over video benefit from a blurred, saturated backdrop that adapts to the frame behind them.

Notification Toasts

Subtle frosted toasts feel native on macOS and iOS-style interfaces without hard, opaque backgrounds.

Frequently Asked Questions

What is the difference between filter and backdrop-filter?

filter applies effects to the element itself and its contents. backdrop-filter applies them to whatever is rendered behind the element. That behind-the-element behaviour is exactly what enables frosted-glass and glassmorphism effects.

Why is my backdrop-filter not showing anything?

The most common cause is a fully opaque background. backdrop-filter only affects pixels visible through the element, so it needs a semi-transparent or transparent background (e.g. rgba(255,255,255,0.2)) and actual content behind it. This generator adds the tint overlay for you.

Do I need the -webkit-backdrop-filter prefix?

Yes, for Safari (desktop and iOS). Safari has long required the -webkit-backdrop-filter prefix. This tool always outputs both the prefixed and unprefixed declarations so your glass effect works across browsers.

Is backdrop-filter supported in all browsers?

It is supported in current Chrome, Edge, Safari and Firefox. Firefox enabled it by default in version 103. For older browsers, provide a graceful fallback — typically a more opaque solid background via an @supports not (backdrop-filter: blur(1px)) query.

Does backdrop-filter hurt performance?

Backdrop filters are more expensive than regular filters because the browser must re-sample the content behind the element. Large blur radii and many simultaneous glass elements (especially on mobile) can affect scrolling smoothness. Keep blur reasonable and limit how many frosted layers overlap.

Can I combine multiple backdrop functions?

Yes. You can chain functions in a single declaration, e.g. backdrop-filter: blur(12px) saturate(160%) brightness(90%). This generator outputs all active functions in one space-separated value, applied left to right.

What does "Show all" do in the CSS output?

By default the generator only includes functions whose values differ from their defaults (it skips, for example, brightness(100%)). Toggle Show all to output every function explicitly for a fully self-documenting rule.