CSS · Visual Effects

Backdrop Filter

Create glassmorphism and frosted glass effects

Find videos you like?

Save to resource drawer for future reference!

Backdrop Filter

Blur & filter the background behind elements

Backdrop Filter = Glassmorphism! 🪟

Unlike filter which affects the element itself, backdrop-filter affects the background behind the element. Perfect for modern glass/frosted effects!

filter vs backdrop-filter

filter

Blurs the element itself
Content becomes blurry
Use: blur images, darken elements

backdrop-filter

Blurs the background behind
Content stays sharp
Use: glassmorphism, frosted glass

Filter Functions

Same functions as filter property

backdrop-filter uses the same functions as filter, but applies them to the background!

blur()

Frosted glass effect

backdrop-filter: blur(10px);

brightness()

Darken background

backdrop-filter: brightness(80%);

contrast()

Enhance contrast

backdrop-filter: contrast(150%);

grayscale()

Desaturate background

backdrop-filter: grayscale(100%);

saturate()

Boost colors

backdrop-filter: saturate(200%);

hue-rotate()

Shift colors

backdrop-filter: hue-rotate(90deg);

Combine Multiple!

backdrop-filter: blur(10px) saturate(180%);

Glassmorphism Demo

Modern frosted glass cards

Glassmorphism Cards

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="title">
      <h1>Glassmorphism</h1>
      <p>Backdrop Filter in Action</p>
    </div>
    <div class="container">
      <div class="glass-card blur-light">
        <div class="icon">✨</div>
        <h2>Light Blur</h2>
        <p>backdrop-filter: blur(5px)<br><br>Subtle glass effect with light background blur.</p>
      </div>
      <div class="glass-card blur-medium">
        <div class="icon">💎</div>
        <h2>Medium Blur</h2>
        <p>backdrop-filter: blur(15px)<br><br>Classic glassmorphism with moderate blur.</p>
      </div>
      <div class="glass-card blur-heavy">
        <div class="icon">🔮</div>
        <h2>Heavy Blur</h2>
        <p>backdrop-filter: blur(30px) saturate(200%)<br><br>Intense frosted glass with enhanced colors.</p>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Perfect Glassmorphism Recipe

The classic glass card formula

Complete Glass Effect

.glass {
  /* Backdrop blur */
  backdrop-filter: blur(10px) saturate(180%);
  
  /* Semi-transparent background */
  background: rgba(255, 255, 255, 0.25);
  
  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  /* Shadow for depth */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  
  /* Round corners */
  border-radius: 16px;
}

This recipe works on any background - images, gradients, or colors!

Key Ingredients:

Backdrop blur:Creates the frosted effect

Transparent background:Shows the blurred background through

Border highlight:Defines the glass edge

Saturate filter:Enhances colors behind

Common Use Cases

Where to use backdrop-filter

Navigation Bars

Transparent header that blurs content behind

Modal Overlays

Dialog backgrounds with frosted effect

Cards

Modern glass cards over images/gradients

Sidebars

Floating panels with glass effect

Tooltips

Subtle frosted tooltips

Search Bars

Transparent search overlays

Performance Tips

Use backdrop-filter wisely

Performance Cost

backdrop-filter is GPU-intensive! Use sparingly and test performance on mobile devices.

✅ Good: Small cards, nav bars, modals

❌ Avoid: Large areas, many elements, animations

Remember

backdrop-filter blurs the background, not the element

Combine with semi-transparent background

Add saturate(180%) for vibrant colors

Browser support: Chrome 76+, Safari 9+, Firefox 103+

Previous Topic

Filters

blur(), brightness(), contrast(), grayscale(), hue-rotate(), saturate(), sepia(), drop-shadow().

Next Topic

Blend Modes

mix-blend-mode, background-blend-mode, isolation, and compositing effects.

Ask a Question

Have a question about Backdrop Filter? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Visual Effects

Backdrop Filter

Create glassmorphism and frosted glass effects

Find videos you like?

Save to resource drawer for future reference!

Backdrop Filter

Blur & filter the background behind elements

Backdrop Filter = Glassmorphism! 🪟

Unlike filter which affects the element itself, backdrop-filter affects the background behind the element. Perfect for modern glass/frosted effects!

filter vs backdrop-filter

filter

Blurs the element itself
Content becomes blurry
Use: blur images, darken elements

backdrop-filter

Blurs the background behind
Content stays sharp
Use: glassmorphism, frosted glass

Filter Functions

Same functions as filter property

backdrop-filter uses the same functions as filter, but applies them to the background!

blur()

Frosted glass effect

backdrop-filter: blur(10px);

brightness()

Darken background

backdrop-filter: brightness(80%);

contrast()

Enhance contrast

backdrop-filter: contrast(150%);

grayscale()

Desaturate background

backdrop-filter: grayscale(100%);

saturate()

Boost colors

backdrop-filter: saturate(200%);

hue-rotate()

Shift colors

backdrop-filter: hue-rotate(90deg);

Combine Multiple!

backdrop-filter: blur(10px) saturate(180%);

Glassmorphism Demo

Modern frosted glass cards

Glassmorphism Cards

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="title">
      <h1>Glassmorphism</h1>
      <p>Backdrop Filter in Action</p>
    </div>
    <div class="container">
      <div class="glass-card blur-light">
        <div class="icon">✨</div>
        <h2>Light Blur</h2>
        <p>backdrop-filter: blur(5px)<br><br>Subtle glass effect with light background blur.</p>
      </div>
      <div class="glass-card blur-medium">
        <div class="icon">💎</div>
        <h2>Medium Blur</h2>
        <p>backdrop-filter: blur(15px)<br><br>Classic glassmorphism with moderate blur.</p>
      </div>
      <div class="glass-card blur-heavy">
        <div class="icon">🔮</div>
        <h2>Heavy Blur</h2>
        <p>backdrop-filter: blur(30px) saturate(200%)<br><br>Intense frosted glass with enhanced colors.</p>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Perfect Glassmorphism Recipe

The classic glass card formula

Complete Glass Effect

.glass {
  /* Backdrop blur */
  backdrop-filter: blur(10px) saturate(180%);
  
  /* Semi-transparent background */
  background: rgba(255, 255, 255, 0.25);
  
  /* Subtle border */
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  /* Shadow for depth */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  
  /* Round corners */
  border-radius: 16px;
}

This recipe works on any background - images, gradients, or colors!

Key Ingredients:

Backdrop blur:Creates the frosted effect

Transparent background:Shows the blurred background through

Border highlight:Defines the glass edge

Saturate filter:Enhances colors behind

Common Use Cases

Where to use backdrop-filter

Navigation Bars

Transparent header that blurs content behind

Modal Overlays

Dialog backgrounds with frosted effect

Cards

Modern glass cards over images/gradients

Sidebars

Floating panels with glass effect

Tooltips

Subtle frosted tooltips

Search Bars

Transparent search overlays

Performance Tips

Use backdrop-filter wisely

Performance Cost

backdrop-filter is GPU-intensive! Use sparingly and test performance on mobile devices.

✅ Good: Small cards, nav bars, modals

❌ Avoid: Large areas, many elements, animations

Remember

backdrop-filter blurs the background, not the element

Combine with semi-transparent background

Add saturate(180%) for vibrant colors

Browser support: Chrome 76+, Safari 9+, Firefox 103+

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Filters

Blend Modes

Building Your Learning Module...

Backdrop Filter

Backdrop Filter = Glassmorphism! 🪟

filter vs backdrop-filter

Combine Multiple!

Glassmorphism Cards

Complete Glass Effect

Key Ingredients:

Performance Cost

Remember

Filters

Blend Modes

Backdrop Filter

Backdrop Filter = Glassmorphism! 🪟

filter vs backdrop-filter

Combine Multiple!

Glassmorphism Cards

Complete Glass Effect

Key Ingredients:

Performance Cost

Remember