25 backdrop-filter CSS Examples: Full Code & Examples

The CSS backdrop-filter property applies visual effects to the area behind an element. Unlike filter, which affects the element itself, backdrop-filter transforms what shows through from behind – creating frosted glass, blurred overlays, and color-shifted surfaces without touching the underlying content.

I put together 25 examples that go beyond the usual frosted glass card. You will find sticky navbars, command palettes, cyberpunk surfaces, depth-layered stacks, grayscale reveals, and noise-textured glass panels. Each one is self-contained with copy-paste-ready code.

Foundational Glass Effects

These first five examples cover the most common real-world uses of backdrop-filter. They are simple to implement and immediately useful.

1. Frosted Glass Card

The classic entry point, done right. A card floats over a vibrant cityscape using blur(16px) paired with saturate(180%) to keep the colors lively behind the frost. The translucent border and subtle shadow create physical depth.

/* backdrop-filter: blur() + saturate() */
.glass-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 36px 32px;
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

2. Sticky Navigation Bar

A fixed navigation bar with frosted glass. The brightness(1.1) lifts the blurred backdrop slightly so the nav feels luminous rather than murky. This pattern works for any site where content scrolls beneath a persistent header.

/* backdrop-filter: blur() + brightness() */
.frosted-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.45);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(12px) brightness(1.1);
    backdrop-filter: blur(12px) brightness(1.1);
}

3. Modal Dialog

A full-screen frosted overlay that dims and blurs the page behind a modal. The combination of blur(20px) with brightness(0.6) creates a dimming effect that feels more sophisticated than a flat semi-transparent black overlay.

/* backdrop-filter: blur() + brightness() for dimming */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(20px) brightness(0.6);
    backdrop-filter: blur(20px) brightness(0.6);
}

4. Command Palette

A macOS Spotlight-style command palette with blur(24px) and saturate(150%) over a gradient mesh background. The heavy blur makes the background color bleed through as ambient light, which gives the dark palette a sense of transparency without revealing distracting detail.

/* backdrop-filter: blur() + saturate() - dark surface */
.command-palette {
    background: rgba(15, 15, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

5. Toast Notification

A compact notification toast positioned at the bottom-right corner. The light blur(8px) with saturate(120%) keeps it subtle while still visually distinct from the content behind it.

/* backdrop-filter: blur() + saturate() - subtle toast */
.toast {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

UI Components

These seven examples show backdrop-filter applied to real interface components: pricing cards, login forms, sidebars, media players, and more.

6. Pricing Table Cards

Three pricing tiers with increasing blur intensity. The basic tier uses blur(10px), the featured pro tier uses blur(16px) saturate(140%) for extra vibrancy, and the enterprise tier uses blur(20px) brightness(0.9) for a muted, premium feel. The blur difference subtly communicates visual hierarchy.

/* Three tiers with different blur intensities */
.tier-basic {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.tier-pro {
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}
.tier-enterprise {
    -webkit-backdrop-filter: blur(20px) brightness(0.9);
    backdrop-filter: blur(20px) brightness(0.9);
}

7. Login Form

A centered authentication form over warm editorial photography. The contrast(1.1) paired with brightness(0.9) creates a glass surface that is slightly darker and sharper than a plain blur, making form inputs easier to read. The inputs themselves also use a light blur(4px) for a layered glass effect.

/* backdrop-filter: blur() + brightness() + contrast() */
.login-panel {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(14px) brightness(0.9) contrast(1.1);
    backdrop-filter: blur(14px) brightness(0.9) contrast(1.1);
}

/* Layered glass on inputs */
.login-panel input {
    background: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

8. Sidebar Panel

An app-style sidebar navigation with frosted glass. The saturate(140%) prevents the mountain landscape from looking washed out behind the blur. Menu items use hover states with subtle background shifts to maintain the glass aesthetic.

/* backdrop-filter: blur() + saturate() - sidebar */
.glass-sidebar {
    width: 240px;
    background: rgba(0, 0, 0, 0.25);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

9. Media Player Controls

A bottom-anchored audio player floating over concert imagery. The saturate(200%) intensifies the stage lighting colors bleeding through the blur, creating an immersive, neon-tinged control bar. The brightness(0.8) keeps it dark enough for readable white text.

/* backdrop-filter: blur() + brightness() + saturate() */
.player-bar {
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(12px) brightness(0.8) saturate(200%);
    backdrop-filter: blur(12px) brightness(0.8) saturate(200%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

10. Image Caption Overlay

A subtle caption bar at the bottom of a photograph. The light blur(6px) with brightness(0.85) softens just enough background to make the serif typography readable without obscuring the image. The effect is restrained and photographic in feel.

/* backdrop-filter: blur() + brightness() - photo caption */
.photo-caption {
    background: rgba(0, 0, 0, 0.15);
    -webkit-backdrop-filter: blur(6px) brightness(0.85);
    backdrop-filter: blur(6px) brightness(0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

11. Dashboard Widget

A statistics card for a dark-themed dashboard. The brightness(1.2) lightens the blurred cosmic background while saturate(80%) desaturates it slightly, preventing the colorful orbs from overwhelming the data. The result is a subtle ambient glow behind sharp numbers.

/* backdrop-filter: blur() + brightness() + saturate() */
.dashboard-widget {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(16px) brightness(1.2) saturate(80%);
    backdrop-filter: blur(16px) brightness(1.2) saturate(80%);
}

12. Crystal Lens Orb

A circular glass orb floating over a vivid background, using blur(20px) with saturate(200%) and brightness(1.1). The heavy blur turns the colorful backdrop into soft ambient light that fills the sphere, while the high saturation keeps the colors rich. On hover, the blur dissolves and the sharp image appears through the orb like a magnifying glass snapping into focus. The circular shape paired with a radial inner shadow sells the illusion of a physical glass object.

/* backdrop-filter: blur() + saturate() - crystal orb */
.crystal-orb {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.1);
    backdrop-filter: blur(20px) saturate(200%) brightness(1.1);
    box-shadow:
        inset 0 -40px 60px rgba(0, 0, 0, 0.15),
        inset 0 40px 60px rgba(255, 255, 255, 0.08),
        0 20px 60px rgba(0, 0, 0, 0.3);
    transition: backdrop-filter 0.6s, -webkit-backdrop-filter 0.6s;
}

.crystal-orb:hover {
    -webkit-backdrop-filter: blur(0px) saturate(120%) brightness(1);
    backdrop-filter: blur(0px) saturate(120%) brightness(1);
}

Creative and Editorial

These six examples push backdrop-filter into editorial, cinematic, and creative territory. They pair the property with sepia, contrast, and dramatic composition.

13. Luxury Editorial Overlay

A vertical glass strip over editorial photography, using sepia(0.3) alongside blur(20px) to create a warm, tinted frost. The sepia adds an analog, film-like warmth to the blurred backdrop. Paired with serif typography, this feels like a high-end magazine spread.

/* backdrop-filter: blur() + sepia() + brightness() */
.editorial-strip {
    background: rgba(30, 20, 10, 0.25);
    -webkit-backdrop-filter: blur(20px) sepia(0.3) brightness(0.9);
    backdrop-filter: blur(20px) sepia(0.3) brightness(0.9);
}

14. Cyberpunk Neon Surface

Cranking saturate(300%) with brightness(1.3) creates a hyper-vivid backdrop that makes neon city lights bleed aggressively through the glass. The cyan border glow and top accent line complete the cyberpunk aesthetic. This is backdrop-filter used as a creative amplifier, not just a blur.

/* backdrop-filter: blur() + saturate() + brightness() - neon */
.neon-surface {
    background: rgba(10, 10, 30, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(12px) saturate(300%) brightness(1.3);
    backdrop-filter: blur(12px) saturate(300%) brightness(1.3);
    box-shadow:
        0 0 20px rgba(0, 255, 255, 0.15),
        0 0 60px rgba(0, 255, 255, 0.05),
        inset 0 0 30px rgba(0, 255, 255, 0.03);
}

15. Split Panel Comparison

A draggable before/after comparison. The left side shows the original image unfiltered. The right side applies blur(16px) saturate(180%). Drag the divider to compare. This is useful for any context where you need to demonstrate what backdrop-filter actually does to the background.

/* Split comparison - filtered vs. unfiltered */
.comparison-filtered {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-left: 2px solid rgba(255, 255, 255, 0.5);
}

16. Testimonial Block

A testimonial card over a dark marble texture. The brightness(1.05) gently lightens the blurred gold veins, creating a subtle warm glow behind the quote. The restraint here matters – heavy effects would overpower the text content.

/* backdrop-filter: blur() + brightness() - testimonial */
.testimonial-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    -webkit-backdrop-filter: blur(10px) brightness(1.05);
    backdrop-filter: blur(10px) brightness(1.05);
}

17. Portfolio Card with Hover Reveal

The card starts with no blur. On hover, the overlay transitions to blur(8px) contrast(1.2), revealing the project title and CTA. The contrast(1.2) sharpens the blurred background slightly, creating a glass that feels crisp rather than soft. The image simultaneously scales up subtly for a sense of motion.

/* backdrop-filter transition on hover */
.portfolio-overlay {
    -webkit-backdrop-filter: blur(0px) contrast(1);
    backdrop-filter: blur(0px) contrast(1);
    transition: backdrop-filter 0.4s, -webkit-backdrop-filter 0.4s;
}
.portfolio-card:hover .portfolio-overlay {
    -webkit-backdrop-filter: blur(8px) contrast(1.2);
    backdrop-filter: blur(8px) contrast(1.2);
}

18. Product Feature Panel

A horizontal split layout with one half showing the product image clearly and the other half blurred into a frosted description panel. The saturate(160%) keeps product colors popping through the frost, useful for marketing pages where brand colors matter.

/* backdrop-filter: blur() + saturate() - split layout */
.feature-panel {
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

Advanced and Experimental

These final seven examples explore less common backdrop-filter functions: hue-rotate, layered depth, cursor-tracked masks, grayscale, invert, and SVG noise textures.

19. Hue-Rotate Spectrum Strip

Six segments, each applying a different hue-rotate value to the landscape behind them. The same mountain scene appears in completely different color palettes through each panel. No JavaScript – pure CSS. This demonstrates that backdrop-filter can be used for color manipulation, not just blurring.

/* backdrop-filter: hue-rotate() - color spectrum */
.segment-1 {
    -webkit-backdrop-filter: hue-rotate(0deg) blur(2px);
    backdrop-filter: hue-rotate(0deg) blur(2px);
}
.segment-2 {
    -webkit-backdrop-filter: hue-rotate(60deg) blur(2px);
    backdrop-filter: hue-rotate(60deg) blur(2px);
}
.segment-3 {
    -webkit-backdrop-filter: hue-rotate(120deg) blur(2px);
    backdrop-filter: hue-rotate(120deg) blur(2px);
}
/* ...continue for 180, 240, 300 degrees */

20. Layered Depth Stack

Three nested panels with increasing blur: blur(20px) on the back, blur(8px) in the middle, blur(2px) on the front. Each layer has a depth label. The nested structure creates a genuine depth-of-field effect where the city behind sharpens as you approach the foreground.

/* Layered depth with increasing blur */
.depth-back {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 1;
}
.depth-mid {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 2;
}
.depth-front {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 3;
}

21. Spotlight Content Reveal

The entire background is covered by a blur(30px) layer, but a circular hole around your cursor remains clear. Move your mouse to reveal the unblurred image. The mask uses radial-gradient with CSS custom properties updated via JavaScript for cursor tracking.

/* backdrop-filter with mask for spotlight effect */
.blur-overlay {
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    -webkit-mask-image: radial-gradient(
        circle 120px at var(--mx, 50%) var(--my, 50%),
        transparent 0%,
        black 100%
    );
    mask-image: radial-gradient(
        circle 120px at var(--mx, 50%) var(--my, 50%),
        transparent 0%,
        black 100%
    );
}

// Update cursor position as CSS custom properties
element.addEventListener('mousemove', (e) => {
    const rect = container.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    const y = ((e.clientY - rect.top) / rect.height) * 100;
    blurLayer.style.setProperty('--mx', x + '%');
    blurLayer.style.setProperty('--my', y + '%');
});

22. Liquid Glass Button Group

A row of buttons where each button is its own frosted glass surface. The base state uses blur(6px) saturate(120%). On hover, it shifts to blur(10px) saturate(180%) with a subtle outer glow. The active button pushes to blur(12px) saturate(200%) brightness(1.3) with an inner glow shadow.

/* Liquid glass buttons with hover transitions */
.glass-btn {
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
    transition: all 0.25s;
}
.glass-btn:hover {
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    backdrop-filter: blur(10px) saturate(180%);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
.glass-btn.active {
    -webkit-backdrop-filter: blur(12px) saturate(200%) brightness(1.3);
    backdrop-filter: blur(12px) saturate(200%) brightness(1.3);
    box-shadow:
        0 0 24px rgba(255, 255, 255, 0.15),
        inset 0 0 12px rgba(255, 255, 255, 0.05);
}

23. Grayscale-to-Color Reveal

The card applies grayscale(100%) blur(1px), making the colorful sunset behind it appear as a moody black-and-white backdrop. On hover, the filter transitions to grayscale(0%) blur(0px), and the full color floods back. The 0.6s transition makes the color reveal feel cinematic.

/* backdrop-filter: grayscale() transition on hover */
.grayscale-card {
    -webkit-backdrop-filter: grayscale(100%) blur(1px);
    backdrop-filter: grayscale(100%) blur(1px);
    transition: backdrop-filter 0.6s ease,
                -webkit-backdrop-filter 0.6s ease;
}
.grayscale-card:hover {
    -webkit-backdrop-filter: grayscale(0%) blur(0px);
    backdrop-filter: grayscale(0%) blur(0px);
}

24. Invert Contrast Panel

Using invert(1) contrast(1.5) as the backdrop-filter creates a dramatic negative-image effect. The bright architecture interior becomes a high-contrast dark composition. Text is styled in black to read naturally against the inverted backdrop. This is about as far from standard blur as backdrop-filter can go.

/* backdrop-filter: invert() + contrast() */
.invert-panel {
    background: rgba(0, 0, 0, 0.05);
    border: 2px solid #000;
    -webkit-backdrop-filter: invert(1) contrast(1.5);
    backdrop-filter: invert(1) contrast(1.5);
    color: #000;
}

25. Noise + Glass Composition

The final example combines blur(16px) saturate(150%) with a CSS noise texture applied via an SVG feTurbulence filter on a pseudo-element. The noise overlay adds subtle grain to the frosted surface, mimicking the texture of real frosted glass rather than the perfectly smooth digital blur browsers produce by default.

/* backdrop-filter + SVG noise texture overlay */
.noise-glass {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    overflow: hidden;
}

/* Noise grain via SVG feTurbulence */
.noise-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' 
xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E
%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' 
numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E
%3Crect width='100%25' height='100%25' filter='url(%23n)' 
opacity='0.04'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    pointer-events: none;
}

Interactive Backdrop-Filter Explorer

Use the sliders below to experiment with every backdrop-filter function in real time. The code output updates as you adjust each value.

Backdrop-Filter Explorer

Filtered Area

blur 12px

saturate 100%

brightness 100%

contrast 100%

hue-rotate 0deg

grayscale 0%

sepia 0%

invert 0%

Reset

Copy

Best Practices

After building all 25 examples above, here are the key techniques and practical advice for using backdrop-filter in production.

Creative Techniques Summary

Performance

backdrop-filter is GPU-accelerated in all modern browsers. That said, large blur radii on large elements are expensive.

• Keep blur() values under 20px for elements covering large viewport areas.
• Avoid stacking multiple elements with backdrop-filter on top of each other – each one triggers a separate compositing pass.
• Use will-change: backdrop-filter on elements that transition their filter values, then remove it after the transition ends.
• On mobile, test performance carefully. Older devices can drop frames with heavy blur on full-screen overlays.
• If performance is an issue, consider using a pre-blurred background image as a fallback instead of real-time backdrop-filter.

Accessibility and Readability

• Always ensure sufficient contrast between text and the blurred background. Use a semi-transparent background color on the filtered element to guarantee minimum contrast.
• Do not rely on backdrop-filter alone for text readability – if the filter fails to load, your rgba() background should still make text readable.
• Respect prefers-reduced-motion when animating backdrop-filter transitions. Some users are sensitive to blur and saturation shifts.
• Test with backdrop-filter disabled (some browsers in certain configs still do not support it). The fallback should be a solid or semi-transparent background that maintains readability.

Browser Fallback Pattern

/* Always provide a fallback background */
.glass-element {
    background: rgba(0, 0, 0, 0.7);              /* fallback */
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* Enhanced background when filter is supported */
@supports (backdrop-filter: blur(1px)) {
    .glass-element {
        background: rgba(0, 0, 0, 0.3);          /* lighter when blur works */
    }
}

FAQs

Common questions about using backdrop-filter in CSS.

Summary

backdrop-filter does more than create frosted glass cards. I showed 25 examples that cover sticky navbars, command palettes, media players, cyberpunk neon surfaces, depth stacks, cursor-tracked spotlights, grayscale reveals, inverted glass, and noise-textured surfaces.

The key insight is that backdrop-filter accepts the same functions as filter – blur, saturate, brightness, contrast, hue-rotate, grayscale, sepia, and invert – but applies them to the backdrop rather than the element. Combining these functions, layering them at different intensities, and pairing them with CSS masks, transitions, and pseudo-elements opens up a wide range of creative possibilities.

For production use: always provide an rgba() background as a fallback, include the -webkit- prefix for Safari, test blur performance on mobile, and ensure text contrast works even without the filter.