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 guide covers what each filter function 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 free CSS Filter Generator 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

Nine knobs and a shadow, one property.

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

The rest are situational: contrast(%) stretches or squashes tonal range, grayscale(%) and sepia(%) apply their namesake conversions partially or fully, invert(%) flips values, hue-rotate(deg) spins every color around the wheel by the same angle, and opacity(%) fades the element inside the chain. drop-shadow() is the odd one out: it casts a shadow that follows the visible pixels, so a transparent PNG or SVG icon gets a shadow in its own shape rather than a rectangle.

Functions chain in one space-separated list, applied left to right, and order matters: grayscale(100%) sepia(100%) yields a warm tint, while the reverse ends up plain gray. The CSS Filter Generator always writes them in one fixed order, so reorder by hand if your effect depends on a different sequence.

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%. Click Upload your image to judge it on one of your own photos rather than the sample landscape; the file is read locally and never leaves the browser tab. Note what the output omits: contrast, grayscale, hue-rotate, invert, sepia and opacity never appear because they're still at defaults, and the tool only writes functions you've changed.

The sixteen presets are worth a look before you start from zero. Noir writes brightness(90%) contrast(130%) grayscale(100%), a common look for team photos that turn to color on hover, and Vintage, Warm, Faded, Vivid and Dramatic cover the other usual moods.

Filtering the element or what's behind it

The element, or the view through it.

filter and backdrop-filter take the same functions but aim at different pixels, and the choice 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.

Keeping filtered pages smooth

Blur is the expensive one.

Filter cost mostly comes down to blur. It 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. drop-shadow() also blurs, so treat large shadow blurs with the same care. The color functions are cheap 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; put the preset value on :hover and add transition: filter 0.3s to the base rule.

When you need the processed pictures as actual files, for an email, a social post, or a CMS that won't run your CSS, the Bulk Photo Filter applies a look to many photos 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