filter

Definition

The filter CSS property allows you to apply visual effects and image adjustments to elements. It provides a way to manipulate the appearance of images, backgrounds, and even text. The filter property accepts various filter functions, such as blur(), grayscale(), brightness(), contrast(), saturate(), and more.

For example, filter: grayscale(50%); will render an element with a 50% grayscale effect, making it appear partially black and white. The filter property is a powerful tool for creating unique visual effects and enhancing the visual aesthetics of web content.

Syntax

.image {
  filter: brightness(1.15) saturate(1.2);
}

Values

blur(px) brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() saturate() sepia().
url(#filter-id): reference SVG filters.
Chain multiple functions to compose effects.

Practical Examples

img.hero {
  filter: saturate(1.1) contrast(1.05);
}

.card.is-disabled {
  filter: grayscale(1) brightness(0.7);
}

Filters adjust imagery without round-tripping through design tools.

HTML

Code

<div class="grid gap-4 sm:grid-cols-2">
  <div class="h-36 overflow-hidden rounded-xl border border-slate-200">
    <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=600&q=80" alt="Landscape">
  </div>
  <div class="h-36 overflow-hidden rounded-xl border border-slate-200">
    <img class="h-full w-full object-cover" style="filter: saturate(1.25) brightness(1.1);" src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=600&q=80" alt="Landscape enhanced">
  </div>
</div>

Tips & Best Practices

Avoid stacking expensive filters on large scrolling backgrounds to keep frame rates high.
Combine with will-change: filter sparingly to hint at upcoming transitions.
Prefer CSS filters for progressive enhancement; provide fallback colors or overlays.

Accessibility & UX Notes

Do not rely on filters alone to communicate disabled states—pair with textual cues.

Browser Support

CSS filter functions are supported in modern browsers (Chrome 53+, Firefox 35+, Safari 9+, Edge). IE lacks support.

backdrop-filter for filtering behind translucent surfaces.
mix-blend-mode to adjust color interaction with backgrounds.
box-shadow for complementary depth.