CSS filter Explained: Blur, Brightness, Hue-Rotate and More

What the filter property does

The CSS filter property applies image-processing effects to an element and everything inside it — blur, brightness and contrast adjustments, desaturation, colour shifts, and more — right in the browser. It means you can ship a vintage photo treatment or a black-and-white hover state without exporting a second image, hosting extra files, or opening an image editor. One line of CSS, applied live, fully responsive.

The CSS Filter Generator lets you dial in a look with sliders and copies the clean value, but understanding each function makes the output yours to adjust. Here’s the full set.

The filter functions

filter accepts a space-separated list of functions. These are the ones the generator exposes:

• blur(px) — softens the element with a Gaussian blur. The radius is a length, so blur(4px) is subtle and blur(20px) is heavy frosting.
• brightness(%) — multiplies lightness. 100% is unchanged, 0% is black, and values above 100% blow out the highlights.
• contrast(%) — pushes tones away from (or toward) mid-grey. 100% is unchanged; higher values deepen shadows and brighten highlights.
• grayscale(%) — removes colour. 0% is full colour, 100% is fully grey.
• saturate(%) — intensity of colour. 100% is unchanged, 0% is grey, and above 100% is punchy.
• sepia(%) — shifts toward warm brown tones for an aged look.
• invert(%) — flips colours toward their opposite; 100% is a full negative.
• hue-rotate(deg) — spins every hue around the colour wheel. 180deg sends blues to orange and back.
• opacity(%) — makes the element more transparent. Similar to the opacity property, but composable with the other filters.

You combine them by listing them together:

filter: brightness(105%) contrast(110%) sepia(45%) saturate(120%);

That’s roughly a “vintage” preset — slightly brighter, a touch more contrast, warmed up, and a little more saturated.

Why order matters

Filters apply in sequence, left to right, with each function working on the result of the one before it. That makes the order semantically meaningful. grayscale(100%) sepia(100%) first strips all colour, then tints the grey toward brown — a clean sepia. Reverse it to sepia(100%) grayscale(100%) and you tint first, then immediately strip the colour you just added, ending up plain grey. Same functions, opposite result.

To keep results reproducible, the CSS Filter Generator always emits the functions in a fixed order and only includes the ones you’ve actually changed from their neutral default. That’s why the copied value stays short and predictable rather than listing nine functions every time.

filter vs backdrop-filter

A frequent point of confusion: filter blurs the element itself, including its content. If you want the frosted-glass effect where the page behind a translucent panel is blurred, you need backdrop-filter instead:

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

The good news is the blur value you build in the generator works identically in both properties — only the target differs. Reach for filter to treat an image, and backdrop-filter to blur whatever sits behind a translucent surface.

Performance considerations

Filters run on the GPU and are usually inexpensive, but they aren’t free. The big cost is large blur radii applied over large areas — a full-screen blur(30px) can drop frames on mid-range phones, particularly when it animates or sits under scrolling content. A few guidelines:

• Keep blur radii modest unless the area is small.
• Avoid animating heavy filters; if you must, test on a real low-end device.
• Prefer applying filters to fixed-size elements rather than huge backgrounds.

If you’re combining a filter with motion — say, blurring an image as it scales on hover — pair these techniques with the GPU-friendly transforms covered in our CSS transform guide so the whole interaction stays smooth.

Interactive states and accessibility

Filters shine on hover and focus states: desaturate a gallery thumbnail until the user points at it, brighten a card on focus, or blur a background image behind overlaid text to keep the text readable. Because the filter is just CSS, you can transition it:

.thumb { filter: grayscale(100%); transition: filter 0.2s; }
.thumb:hover { filter: grayscale(0%); }

One caution: don’t rely on a filter alone to convey meaning. If a low-contrast or heavily filtered treatment makes text hard to read, add a solid backing or stronger contrast underneath. Decorative effects should never come at the cost of legibility.

Putting it to work

A practical recipe: you have a hero with text over a photo, and the photo is too busy for the text to read. Instead of editing the image, darken and slightly blur it with a filter:

.hero-photo { filter: brightness(70%) blur(2px); }

Now the text pops, and you didn’t touch the source file. Build that exact value by sliding brightness down and blur up in the CSS Filter Generator, preview it on your own uploaded image, and copy the result. Once you know what each function does and why order matters, the filter property becomes one of the most useful tools in your CSS kit — a whole image editor, expressed in a single line.