CSS Filter Playground
Drag the sliders to tune blur, brightness, contrast and more, then copy the CSS filter.
Runs entirely in your browser. Nothing is uploaded.
How to use this tool
This CSS filter playground lets you build a filter visually instead of guessing values by hand. Move any slider, watch the sample box update live, and the matching CSS is generated for you at the bottom. Adjust blur to soften edges, brightness and contrast to control light and tone, grayscale and sepia for color treatments, saturate to boost or mute color intensity, and hue-rotate to shift the entire palette. When the look is right, press Copy CSS and paste the rule onto any element or image on your site. Press Reset filters at any time to return every slider to its default value.
How the CSS filter property works
The filter property applies one or more graphical effects to an element, and the functions are applied in the order you list them. Each function takes a single value. Blur uses a pixel length that sets the radius of the Gaussian blur. Brightness, contrast, grayscale, saturate, sepia, and invert take a percentage where 100% means no change for brightness, contrast, and saturate, while 0% means no effect for grayscale, sepia, and invert. Hue-rotate takes an angle in degrees that rotates colors around the color wheel. This playground only outputs the functions you actually change, so the generated rule stays clean and short.
A real example
Say you want a faded vintage photo look. Set brightness to 110%, contrast to 90%,
saturate to 70%, and sepia to 40%. The tool produces
filter: brightness(110%) contrast(90%) saturate(70%) sepia(40%);.
Apply it to an img tag and the picture gains a warm, slightly washed-out
tone without editing the source file. Want a frosted overlay instead? Set blur to 6px and
brightness to 120% to get a soft, bright glass effect you can drop onto a card background.
Common questions
Does this CSS filter generator change my image file?
No. The filter is a display effect applied by the browser at render time. Your original image, gradient, or element data is never modified, and nothing leaves your device.
Which CSS filter properties does the slider playground cover?
It covers the most used image filter properties: blur, brightness, contrast, grayscale, saturate, sepia, invert, and hue-rotate. You can combine any of them and the tool writes the full filter string for you.
Will the generated filter work in all browsers?
The standard filter property is supported in all current versions of Chrome, Firefox, Safari, and Edge. For very old browsers you may add a -webkit-filter fallback with the same value.
Why does my brightness or saturate look unchanged at 100%?
For brightness, contrast, and saturate, 100% is the neutral baseline that means no change. Drag below 100% to reduce the effect and above 100% to intensify it.
Can I apply the filter to a real image instead of the gradient?
Yes. The preview here uses a gradient box for speed, but the copied CSS works on any element, including an img tag. Just paste the filter rule into that element's styles.