CSS Filter Generator
Tune blur, brightness, contrast, saturation and grayscale with numbers, and copy the filter CSS.
Quick answer: enter your details below and click Generate filter CSS — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Developer
Enter your details below.
How to use
- 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.
About this tool
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.
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.