How to Style Images with CSS Filters
CSS filters adjust photos without editing software. This guide explains blur, brightness, contrast, saturation and grayscale, and how to combine them.
What is the CSS Filter Generator?
Filters restyle an image or element in place: blur softens, brightness lifts, contrast sharpens the range, saturation deepens color, and grayscale drains it. Set each value as a number and this tool writes a single filter line combining all five. Use it on photos, cards or background layers for quick mood changes.
How to use it
- Enter a value for each of the five filter settings.
- Leave a setting at its neutral value when you do not want that effect.
- Click Generate filter CSS and copy the rule into your stylesheet.
Worked example
With blur 2, brightness 110, contrast 100, saturate 120 and grayscale 0, the result is a .filtered rule with filter: blur(2px) brightness(110%) contrast(100%) saturate(120%) grayscale(0%).
Can filters replace photo editing?
For quick tweaks like a softer hero image or a muted thumbnail, yes. For precise retouching or cropping, a photo editor still gives finer control.
Frequently asked questions
What are the neutral values for each filter?
Blur 0, brightness 100, contrast 100, saturate 100 and grayscale 0 leave the element unchanged, so any change from those values creates a visible effect.
Does the order of filters matter?
Yes. Filters apply left to right, so changing the order can change the result slightly, especially when blur and brightness combine.