CSS filter functions

Function	Default	Description
`blur(px)`	0	Applies a Gaussian blur in pixels.
`brightness(%)`	100%	Scales overall brightness. 0% = black, 200% = very bright.
`contrast(%)`	100%	Adjusts difference between light and dark areas.
`grayscale(%)`	0%	Converts to grayscale. 100% = fully monochrome.
`hue-rotate(deg)`	0deg	Rotates all hues around the color wheel.
`invert(%)`	0%	Inverts colors. 100% = full negative.
`opacity(%)`	100%	Controls transparency (GPU-accelerated alternative to the `opacity` property).
`saturate(%)`	100%	Boosts or reduces color saturation. 0% = gray, 200% = vivid.
`sepia(%)`	0%	Applies a warm brown tone. 100% = fully sepia.

Browser support

The filter property is supported in all modern browsers (Chrome 18+, Firefox 35+, Safari 9.1+, Edge 12+). No prefix is needed in current browsers.

Usage example

img {
  filter: blur(2px) brightness(110%) contrast(120%);
}

Filters are applied left to right. Order matters: blur(2px) brightness(150%) produces a slightly different result than brightness(150%) blur(2px).

backdrop-filter

The backdrop-filter property applies filters to the content behind an element, not the element itself. This is commonly used for frosted-glass effects on overlays:

.modal {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
}

The element must have transparency (via rgba, hsla, or opacity) for the backdrop to be visible. Browser support: Chrome/Edge 76+, Safari 9+, Firefox 103+.

Performance note

CSS filters are GPU-accelerated in modern browsers, but applying complex filters to many elements simultaneously can create additional compositing layers and strain the GPU. In performance-critical UIs (e.g., infinite scroll, high-frame-rate animation), monitor DevTools' Performance tab to ensure filters aren't causing dropped frames.

Combining filters

You can chain multiple filters in one declaration to create stylistic effects. Example:

img {
  filter: grayscale(50%) contrast(150%) brightness(110%);
}

This partially desaturates the image, boosts contrast, and slightly increases brightness - useful for a faded, vintage aesthetic. Experiment with layering hue-rotate and saturate to create color-grading effects similar to Instagram filters.