Intermediate12 min read

CSS filter and backdrop-filter: Image Effects and Frosted Glass

12 min read
309 words
23 sections19 code blocks

What is the CSS filter Property?

The filter property applies visual effects like blur, brightness, contrast, and saturation to an element. These effects are applied to the element and all its content, including text and children.

CSS
.image {
  filter: blur(5px);
}

Available Filter Functions

blur()

Applies a Gaussian blur. Higher values create more blur:

CSS
.soft { filter: blur(2px); }
.blurry { filter: blur(10px); }
.extreme { filter: blur(20px); }

brightness()

Adjusts brightness. 1 is normal, less than 1 darkens, greater than 1 brightens:

CSS
.dark { filter: brightness(0.5); }     /* 50% brightness */
.normal { filter: brightness(1); }      /* Normal */
.bright { filter: brightness(1.5); }    /* 150% brightness */

contrast()

Adjusts contrast. 1 is normal:

CSS
.low-contrast { filter: contrast(0.5); }
.high-contrast { filter: contrast(2); }

grayscale()

Converts to grayscale. 0 is normal, 1 is fully gray:

CSS
.gray { filter: grayscale(1); }        /* Fully grayscale */
.partial { filter: grayscale(0.5); }    /* 50% grayscale */

sepia()

Applies a warm sepia tone:

CSS
.vintage { filter: sepia(1); }
.subtle-warm { filter: sepia(0.3); }

saturate()

Adjusts color saturation. 1 is normal:

CSS
.desaturated { filter: saturate(0.3); }
.vivid { filter: saturate(2); }

hue-rotate()

Rotates all colors around the color wheel:

CSS
.shifted { filter: hue-rotate(90deg); }
.inverted-hue { filter: hue-rotate(180deg); }

invert()

Inverts colors. 1 is fully inverted:

CSS
.inverted { filter: invert(1); }
.partial-invert { filter: invert(0.5); }

opacity()

Same as the opacity property but can be combined with other filters:

CSS
.transparent { filter: opacity(0.5); }

drop-shadow()

Adds a shadow that follows the element's shape (including transparency):

CSS
/* drop-shadow(offset-x offset-y blur color) */
.icon { filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3)); }

Unlike box-shadow, drop-shadow follows the actual shape of PNG images with transparency.

Combining Multiple Filters

Chain multiple filters in a single declaration:

CSS
/* Vintage photo effect */
.vintage-photo {
  filter: sepia(0.4) contrast(1.1) brightness(1.1) saturate(1.2);
}

/* Muted/disabled look */
.disabled-image {
  filter: grayscale(1) opacity(0.6);
}

/* Dreamy glow */
.dreamy {
  filter: brightness(1.1) contrast(0.9) blur(0.5px);
}

Interactive Filter Effects

CSS
/* Grayscale to color on hover */
.team-member img {
  filter: grayscale(1);
  transition: filter 0.3s ease;
}

.team-member img:hover {
  filter: grayscale(0);
}

/* Brightness on hover */
.card-image {
  transition: filter 0.3s ease;
}

.card-image:hover {
  filter: brightness(1.1);
}

What is backdrop-filter?

backdrop-filter applies filter effects to the area behind an element, not the element itself. This creates frosted glass and translucent overlay effects.

CSS
.glass-panel {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

The element must have a semi-transparent background for backdrop-filter to be visible.

Frosted Glass Effect

CSS
.frosted-glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 2rem;
}

Practical backdrop-filter Patterns

Glassmorphism Card

CSS
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Fixed Navigation Bar

CSS
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 100;
}
CSS
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
}

Dark Mode Glass

CSS
.dark-glass {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px) brightness(0.8);
  -webkit-backdrop-filter: blur(20px) brightness(0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

Performance Considerations

  • Filters and backdrop-filters are GPU-accelerated but can be expensive
  • blur() is the most performance-intensive filter
  • Avoid applying filters to large areas or many elements simultaneously
  • Use will-change: filter sparingly for elements that will be animated
  • Always include -webkit-backdrop-filter for Safari support

Summary

The filter property applies visual effects to elements and their content, perfect for image manipulation, hover effects, and disabled states. backdrop-filter applies effects to the area behind an element, enabling frosted glass, glassmorphism, and translucent UI patterns. Combine multiple filter functions for complex effects, and always add the -webkit- prefix for backdrop-filter browser compatibility.