Why is my backdrop blur invisible?

The panel may be opaque, or there may be no detailed content behind it to reveal the blur.

Do I still need the WebKit prefix?

It remains a practical compatibility safeguard for Safari versions in the field.

Is backdrop-filter expensive?

It can be, particularly across large or frequently changing areas. Measure on mobile hardware.

How much blur should glass use?

Use the smallest radius that separates the surface from its backdrop; stronger blur is not automatically more readable.

backdrop-filterIntermediateUsed in 88 effects

Frosted glass with backdrop-filter

backdrop-filter processes pixels behind an element and then composites the element over the result. The effect becomes visible only when the surface itself is at least partly transparent. This is the foundation of frosted navigation bars, floating panels, and glass-like overlays.

Blur is not a substitute for hierarchy or contrast. A production glass surface needs a tint, a border, and a readable fallback so content remains clear over every possible background.

Understand the backdrop model

filter changes the element and its descendants; backdrop-filter changes what is visually behind the element. The surface's background is then drawn on top. An opaque fill hides the processed backdrop completely.

Use a translucent color to stabilize contrast while allowing some of the scene to show through. A subtle light border helps define the glass edge where the background has similar brightness.

blur(): Softens backdrop detail; larger radii increase both diffusion and rendering cost.
saturate(): Restores color intensity that can feel muted after blur.
brightness(): Can stabilize light or dark glass, but should not replace a surface tint.

cssA resilient glass panel

.glass {
  background: rgb(15 23 42 / 68%);
  border: 1px solid rgb(255 255 255 / 14%);
  box-shadow: 0 18px 50px rgb(2 6 23 / 28%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

Start with a readable fallback

Write the solid or translucent background first, then enhance it inside @supports. If filtering is unavailable or disabled, the panel must still separate text from the scene behind it.

Safari compatibility may still require -webkit-backdrop-filter. Keep prefixed and unprefixed declarations together so they cannot drift during maintenance.

cssProgressive enhancement

.glass { background: rgb(15 23 42 / 94%); }

@supports ((backdrop-filter: blur(1px)) or
           (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgb(15 23 42 / 68%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
}

Limit filtered area and motion

Backdrop filtering requires the browser to sample and recomposite changing pixels behind the surface. Large fixed layers and dozens of glass cards can become expensive during scrolling, especially on mobile GPUs.

Use one shared panel where possible, keep the blur radius moderate, and avoid animating the filter itself. Animate opacity or transform on a stable filtered surface instead.

Design for unpredictable backgrounds

The same panel can sit over a bright photograph, a dark gradient, or moving content. Test both extremes and do not rely on blur alone to make text readable. Tint strength should carry the minimum contrast requirement.

For critical text, consider an opaque inner surface or a stronger gradient behind the copy. Glass should support the content hierarchy, not make it conditional on the wallpaper.

Live catalog examples

These production examples use backdrop-filter. Open any effect to inspect its complete source and experiment in the browser editor.

Floating Bottom Nav

Horizontal Bottom Dot Nav

Blur Background Input

Frosted Ice Button

Glassmorphism Input

Frosted Glass Input

View all 88 effects using backdrop-filter

Browser support

Support notes refer to stable, unprefixed behavior unless a prefix is explicitly listed.

Feature	Browsers	Note
backdrop-filter	All current major browsers	Test on target devices because rendering cost varies widely.
-webkit-backdrop-filter	Safari compatibility	Keep the prefixed declaration alongside the standard one.
@supports	All modern browsers	Use it to enhance a readable base surface.

Common pitfalls

The surface is opaque
Backdrop pixels cannot show through an opaque background; use a controlled alpha value.
filter is used instead
filter processes the panel itself. Use backdrop-filter for content behind it.
Every repeated card gets a blur
Consolidate filtering into fewer surfaces to reduce compositing work.
Contrast depends on the backdrop
Add enough tint to meet readability requirements over both bright and dark scenes.

Frequently asked questions

Why is my backdrop blur invisible?: The panel may be opaque, or there may be no detailed content behind it to reveal the blur.
Do I still need the WebKit prefix?: It remains a practical compatibility safeguard for Safari versions in the field.
Is backdrop-filter expensive?: It can be, particularly across large or frequently changing areas. Measure on mobile hardware.
How much blur should glass use?: Use the smallest radius that separates the surface from its backdrop; stronger blur is not automatically more readable.

Related guides

Last updated: July 22, 2026

All guides