CSS Filter Playground
Move the sliders to see the effect on a sample picture or on one of your own, then copy the filter line. Only the settings you change are written out.
About CSS Filter Playground
The CSS filter property changes how a picture or element is drawn without editing the file itself. Nine functions cover most needs, from softening with blur to turning a photo into black and white. Because they stack, it is hard to predict the combined result, which is why a live playground helps.
Move the sliders and watch the sample scene change, or choose a picture of your own. Only the filters you have moved are written into the output, in a fixed order, so the code stays short. Reset puts every slider back to its normal value.
How to use CSS Filter Playground
- Choose the sample picture or one of your own.
- Move the sliders for the filters you want.
- Compare the result with the original using Reset.
- Copy the filter line.
Common uses
- Making a muted background behind text
- Turning a logo row grey until it is hovered
- Giving photos a consistent warm or cool tint
- Testing how a dark mode image might look inverted
Frequently asked questions
Do filters change the original file?
No. The filter is applied when the page is drawn. The picture file is untouched, and removing the filter brings back the original look.
Can I use more than one filter at once?
Yes. Write them one after another in the same filter property, separated by spaces. This tool combines every slider you have moved into a single line, so you can build a complete look and copy it in one go.
Does the order of filters matter?
Yes, slightly. Each filter works on the result of the one before. This tool uses a fixed order, so the copied code matches the preview exactly.
Are filters slow?
Small filters are fine. A large blur over a big area can slow older phones, so test it on a real device if the element is large or animated.
What is the difference between grayscale and saturate?
Grayscale removes colour towards grey, from 0 to 100 per cent. Saturate scales the colour intensity, where 100 per cent is normal, 0 is grey and higher values are more vivid.