CSS Generators·4 min read

CSS Filters Explained: Blur, Brightness, Saturate

You don't need to round-trip through an image editor to dim, blur, or desaturate a picture; the browser applies those adjustments at render time from a single line. This is css filters explained in practical terms: what each of the eight functions does, how they chain, a worked recipe for image cards with text on top, and where the performance costs hide. Filters are one of the highest-return lines in CSS, because one declaration can restyle every image on a page without touching a file.

Open the tool All insights

When CSS filters come up in real projects

The non-destructive option.

The classic trigger is a card grid: marketing hands you twelve photos with wildly different exposure and saturation, and the design calls for a uniform, slightly muted look. Re-exporting twelve assets is busywork, and the next batch will arrive unprocessed anyway.

A filter rule on the card image class fixes the whole grid at once and keeps fixing it for every future image. The same logic covers dimming hero photos behind headlines, graying out disabled thumbnails, dark-mode adjustments for logos, and hover effects where the color floods back in.

CSS filters explained function by function

Eight knobs, one property.

Three functions do most of the work. blur(px) softens detail and is the only one measured in pixels. brightness(%) scales light linearly, under 100% dims and over 100% lifts. saturate(%) drains or boosts color intensity, with 0% fully gray and 300% cartoonish.

The remaining five are situational: contrast(%) stretches or squashes tonal range, grayscale(%) and sepia(%) apply their namesake conversions partially or fully, invert(%) flips values, and hue-rotate(deg) spins every color around the wheel by the same angle. Functions chain in one space-separated list, applied left to right, and order matters: grayscale(100%) sepia(100%) yields a different tint than the reverse.

A worked filter chain for image cards

Three functions, one mood.

Say you're placing white headlines over photo cards. This chain earns its keep: filter: blur(2px) brightness(80%) saturate(140%);. The slight blur pushes detail back so text pops, the brightness cut protects contrast for the headline, and the saturation lift keeps the dimmed photo from going lifeless.

In the CSS Filter Generator that's three slider moves, Blur to 2px, Brightness to 80%, Saturate to 140%, and the sample photo shows the result immediately. Note what the output omits: contrast, grayscale, hue-rotate, invert, and sepia never appear because they're still at defaults, and the tool only writes functions you've changed.

Filter vs backdrop filter

The element, or what's behind it.

The two properties take the same functions but aim at different pixels, and the filter vs backdrop filter decision comes down to one question: are you styling the element or the view through it? filter transforms the element itself and everything inside it, including descendants you may not have meant to touch.

backdrop-filter leaves the element alone and processes whatever is rendered behind it, which only shows when the element's own background is translucent. Blurring a photo you're displaying is filter work. Building a frosted header that blurs the page scrolling under it is backdrop-filter work, and that entire pattern has its own tool covered below.

Filter mistakes that wreck images

Learn them the cheap way.

A few recurring errors account for most filter regressions in production.

Blurring an element that contains text, then wondering why the text is soft. filter hits all descendants; put the image and the caption in separate elements.
Forgetting blur samples past the element's edges, producing a hazy fringe. Wrapping the image in an overflow: hidden container with a slightly negative margin trims it.
Stacking brightness(50%) on photos that already contain dark areas, crushing them to black. Check the darkest image in the set, not the prettiest.
Reordering a chain during a refactor and silently changing the look, since functions apply left to right.
Applying filter: grayscale(100%) for a disabled state but leaving the cursor and click handler live, so the element looks off but still works.

CSS filters and performance: keeping pages smooth

Blur is the expensive one.

Thinking about filters and performance mostly means thinking about blur. Its cost scales with radius and with the filtered area, so blur(20px) across a full-bleed hero is a very different bill than blur(2px) on a thumbnail. The other seven functions are near-free color math by comparison.

Two tips keep you safe. Don't animate blur; if a hover needs softness to change, crossfade between a filtered and unfiltered layer with opacity instead. And test scroll performance on a mid-range phone whenever a blurred element overlaps scrolling content, because that's where frame drops surface first, not on your development machine.

CSS Filter Generator or a neighboring tool

Live CSS vs baked pixels.

Use the CSS Filter Generator when the adjustment should live in the stylesheet: reversible, theme-aware, and applied uniformly to whatever images come along later. It's the right home for hover states and whole-grid treatments.

When you need the processed picture as an actual file, for an email, a social post, or a CMS that won't run your CSS, the Image Filters tool applies effects and exports real pixels. And if the goal was never the image itself but a frosted panel over page content, skip ahead to the CSS Glassmorphism Generator, which wraps backdrop-filter in a complete recipe.

Try it now

Open CSS Filter Generator

The tool is one click away. No sign up, no upload, no payment.

Open CSS Filter Generator

Write a review