How to use the css filter generator
- Pick a starting look or leave it at No filter.
- Move the sliders, or type exact values in the boxes, for blur, brightness, contrast, grayscale, hue rotate, invert, opacity, saturate and sepia.
- Watch the sample picture change. Edit the selector in the CSS if you want something other than .photo.
- Copy the CSS rule. Use Reset all to start again.
What each effect does
The CSS filter property applies graphic effects to an element and everything inside it. Blur softens the picture by a number of pixels. Brightness and contrast scale how light and how contrasty it is, with 100% as no change. Grayscale and sepia drain the color or tint it brown, from 0% to 100%. Hue rotate turns every color around the color wheel by a number of degrees. Invert flips the colors, opacity makes it see-through and saturate makes the colors weaker or stronger than normal.
The page writes only the effects you have changed, in a fixed order, so a rule stays short. With a blur of 2 pixels, a contrast of 120% and a sepia of 30% the rule is filter: blur(2px) contrast(120%) sepia(30%). When every slider is back at its neutral value, the rule is filter: none.
Using the rule
Paste the rule into your stylesheet, or add the filter line to an existing rule. It works on images, videos and any element, and the order of the effects matters because each one is applied to the result of the one before. A hover effect is a common use: write the rule for the hover state and add a transition so the change is smooth.
The preview is a picture drawn with CSS, so you see each effect without choosing a file, and nothing leaves your browser. Strong blurs and many effects at once can slow older devices, especially on large elements, so test on the devices you care about. Filters change how something looks, not its meaning, so keep enough contrast for text on filtered images. The Color Contrast Checker helps.
Related tools
To apply a sepia look to a real image file, use the Sepia Filter, and for brightness changes on a file, the Adjust Image Brightness tool. The Box Shadow Generator, the CSS Gradient Generator and the CSS Pattern Background Generator build other effects for the same element.
Assumptions and limits
- Values are limited to the ranges of the sliders: blur 0 to 20 px, hue rotate 0 to 360 degrees, opacity, grayscale, invert and sepia 0 to 100%, and brightness, contrast and saturate 0 to 300%.
- The preview is a sample drawing, not your own picture. Results on real photos look different.
- The selector accepts common selector characters. Anything else falls back to .photo.
- Nothing is uploaded or stored.
Frequently asked questions
How do I write a CSS filter?
Use the filter property with one or more functions, such as filter: blur(2px) contrast(120%). This page builds the line from sliders and shows the result on a sample picture.
Does the order of filters matter?
Yes. Each effect is applied to the result of the one before it, so blur then contrast can look different from contrast then blur. The page writes them in one fixed order.
How do I remove a filter?
Set filter: none, which is what the page writes when every slider is at its neutral value. In a hover state you can set it back to none.
Does a filter change the original image file?
No. A CSS filter only changes how the browser draws it. The file stays the same, so you can remove the filter any time.