CSS filter: Blur, Brightness, Contrast and More

The CSS filter property applies graphical effects to elements — blurring, color shifting, brightness adjustment, and more. Unlike image editing in Photoshop, CSS filters are real-time and non-destructive — the original image data is unchanged, only the rendering is affected.

Filters are applied as a list of functions. Order matters: each filter is applied to the result of the previous one. This makes filter combination powerful — blur first, then contrast creates a different result than contrast first, then blur.

What is CSS filter

The CSS filter property accepts a space-separated list of filter functions. Each function modifies the rendering of the element: filter: blur(4px) grayscale(50%). Filters apply to the element and all its content including children — use backdrop-filter if you want to apply filters to only what is behind an element. Filter functions: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), and the url() function for SVG filters.

blur() and brightness()

blur(radius) applies a Gaussian blur. The radius is in pixels or length units: blur(4px). Higher values create more blur. blur(0) is no blur. Negative values are invalid. brightness(amount) adjusts brightness: brightness(1) is unchanged, brightness(0) is black, brightness(2) is twice as bright. Values above 1 can wash out colors. Using brightness() below 1 creates darkening effects; above 1 creates highlighting or overexposure.

contrast(), grayscale(), sepia()

contrast(amount) adjusts contrast: contrast(1) unchanged, contrast(0) is flat gray, contrast(2) is high contrast. grayscale(amount) removes color: grayscale(0) is original, grayscale(1) is fully grayscale. Values between 0 and 1 create partial desaturation. sepia(amount) applies a warm brown tone: sepia(0) is original, sepia(1) is fully sepia. These three filters are often combined for vintage photo effects.

hue-rotate() and saturate()

hue-rotate(angle) rotates the hue of all colors by the specified angle in degrees: hue-rotate(90deg) shifts all colors 90° around the color wheel. hue-rotate(180deg) inverts hues. saturate(amount) adjusts color intensity: saturate(0) is grayscale, saturate(1) is unchanged, saturate(2) is highly saturated. saturate() above 1 creates vivid, almost neon effects. Below 0.5 creates muted, desaturated tones.

drop-shadow() vs box-shadow

drop-shadow(offset-x offset-y blur-radius color) creates a shadow that follows the shape of the element — including transparent areas in images and SVGs. This is the key difference from box-shadow which only follows the element's rectangular bounding box. For PNG images with transparent backgrounds, use drop-shadow() for a shadow that follows the actual silhouette. Syntax: filter: drop-shadow(4px 4px 8px rgba(0,0,0,0.3)).

Combining multiple filters

Multiple filters are applied left to right. filter: brightness(1.2) contrast(1.1) saturate(1.3) creates a vibrant, slightly enhanced image. filter: grayscale(1) brightness(0.8) creates a dark grayscale. filter: blur(2px) brightness(1.2) creates a soft-glow effect. Performance note: each filter requires additional rendering passes. Use will-change: filter on elements that animate their filter property to enable GPU acceleration.

Frequently Asked Questions