CSS Filters

The CSS filter property applies visual effects to an element — blurring, brightening, colorizing, or adding shadows — directly in the browser without any image editing software. Filters work on images, videos, and any HTML element including text and backgrounds.

How filter Works

img {
  filter: blur(4px);
}

.card {
  filter: brightness(1.2) contrast(1.1);
}

You can apply one filter or chain several together, separated by spaces. They apply in order from left to right.

All CSS Filter Functions

blur()

Applies a Gaussian blur. Higher values = more blur.

img { filter: blur(0);   } /* sharp — default */
img { filter: blur(2px); } /* slightly blurred */
img { filter: blur(8px); } /* heavily blurred */

DIAGRAM — blur levels:

blur(0):   [Sharp photo — every detail visible]
blur(2px): [Slight softness — edges less defined]
blur(8px): [Heavy blur — shapes visible, details gone]
blur(16px):[Almost unrecognizable — privacy blur level]

Common use: Background blur behind modals, loading state, frosted glass effect.

brightness()

A value of 1 is the original brightness. Values below 1 darken, above 1 lighten.

img { filter: brightness(0.5); } /* 50% brightness — dark */
img { filter: brightness(1);   } /* original */
img { filter: brightness(1.5); } /* 150% — brighter */
img { filter: brightness(2);   } /* very bright, washed out */

contrast()

Adjusts the difference between light and dark areas.

img { filter: contrast(0);   } /* solid gray — no contrast */
img { filter: contrast(1);   } /* original */
img { filter: contrast(1.5); } /* punchy, vivid */
img { filter: contrast(3);   } /* extreme — near black and white */

grayscale()

Converts the element to black and white. Value is 0 (original) to 1 (full grayscale).

img { filter: grayscale(0);   } /* original color */
img { filter: grayscale(0.5); } /* 50% desaturated */
img { filter: grayscale(1);   } /* fully black and white */

/* Common hover effect — desaturated until hovered */
.team-photo {
  filter: grayscale(1);
  transition: filter 0.3s;
}
.team-photo:hover {
  filter: grayscale(0);
}

sepia()

Applies a warm brownish antique tone, like an old photograph.

img { filter: sepia(0);   } /* original */
img { filter: sepia(0.5); } /* slight vintage tone */
img { filter: sepia(1);   } /* full vintage sepia effect */

hue-rotate()

Rotates all colors around the color wheel by the given angle. This shifts every color in the element simultaneously.

img { filter: hue-rotate(0deg);   } /* original colors */
img { filter: hue-rotate(90deg);  } /* all colors shift 90° */
img { filter: hue-rotate(180deg); } /* near-inverted hues */

DIAGRAM — hue-rotate on a red object:

hue-rotate(0deg):   🔴 Red stays red
hue-rotate(90deg):  🟡 Red shifts to yellow-green
hue-rotate(180deg): 🔵 Red shifts to cyan
hue-rotate(270deg): 🟣 Red shifts to purple

saturate()

Controls color intensity. Below 1 mutes colors; above 1 makes them more vivid.

img { filter: saturate(0);   } /* grayscale */
img { filter: saturate(1);   } /* normal */
img { filter: saturate(2);   } /* extra vivid */
img { filter: saturate(0.5); } /* muted, pastel-like */

invert()

Inverts all colors — white becomes black, blue becomes orange.

img { filter: invert(0); } /* normal */
img { filter: invert(1); } /* fully inverted — like a photo negative */

/* Dark mode icon trick — invert white icons to black and back */
@media (prefers-color-scheme: dark) {
  .logo {
    filter: invert(1);
  }
}

opacity()

Works like the opacity property, but as a filter it can be GPU-accelerated and composited with other filters.

img { filter: opacity(0.5); } /* 50% transparent */

drop-shadow()

Adds a shadow that follows the actual shape of the element (including transparent areas), unlike box-shadow which only follows the rectangular box.

/* drop-shadow(offset-x offset-y blur-radius color) */
img {
  filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4));
}

DIAGRAM — box-shadow vs drop-shadow:

PNG star image:        ★

box-shadow:            ┌───┐
                       │ ★ │░░  ← shadow on the rectangle
                       └───┘░░

drop-shadow:              ★
                          ░★░   ← shadow follows the star shape

Chaining Multiple Filters

Add multiple filter functions in one declaration, separated by spaces. They execute in sequence.

/* Vintage photo effect */
img {
  filter: sepia(0.6) contrast(1.1) brightness(0.9) saturate(0.8);
}

/* Dramatic high-contrast black and white */
img {
  filter: grayscale(1) contrast(2) brightness(1.1);
}

/* Faded look */
img {
  filter: brightness(1.1) saturate(0.6) contrast(0.9);
}

Animating Filters

CSS filters can be smoothly transitioned or animated.

.photo {
  filter: grayscale(1) brightness(0.8);
  transition: filter 0.4s ease;
}

.photo:hover {
  filter: grayscale(0) brightness(1);
}

@keyframes colorPulse {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.rainbow-icon {
  animation: colorPulse 3s linear infinite;
}

backdrop-filter — Blur What's Behind an Element

backdrop-filter applies the filter to everything behind the element, not the element itself. This creates the popular frosted glass effect.

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

DIAGRAM — backdrop-filter:

Background content (colorful):
  ████████████████████████████

Glass card sits on top:
  ┌────────────────────────┐
  │ blurred background ░░░ │  ← backdrop-filter: blur()
  │ Card Text (clear)      │
  └────────────────────────┘

For backdrop-filter to work, the element must have a partially transparent background. A fully opaque background hides the backdrop entirely.

Filter Quick Reference

CSS filters transform elements in the browser at render time — no Photoshop, no extra image files, no server-side processing. They are ideal for hover effects, dark mode adaptations, image stylization, and interactive visual feedback.