🎚️ CSS Filter Generator with Live Preview
By Shihab Mia · Updated 2026-07-05
Drag the sliders to build a filter. The preview and CSS update live. Your image stays in your browser and is never uploaded.
This CSS filter generator builds a ready-to-paste filter declaration while you watch it apply live. Drag a slider for each function (blur, brightness, contrast, grayscale, hue-rotate, invert, saturate and sepia), see the preview update instantly, then copy the exact filter CSS. You can test on a sample box or load your own image, which stays entirely in your browser and is never uploaded. The tool writes only the functions you actually change, so the output stays clean and short.
What is the CSS Filter Generator?
The CSS filter property applies graphical effects to an element while the browser paints it. A single filter declaration takes one or more filter functions separated by spaces, and they run in the order you list them. That order matters: filter: contrast(150%) blur(2px) boosts contrast first and then blurs the higher-contrast result, which looks different from blur(2px) contrast(150%). Because the effect happens at render time, the underlying content (an image file, a div, some text) is never modified, so you can add, animate, or remove a filter at any moment with CSS or JavaScript and the original appearance returns instantly.
Each function expects a value in a specific form. blur() takes a CSS length such as 4px and softens the element with a Gaussian blur; larger radii cost more to render. hue-rotate() takes an angle in degrees and spins every color around the color wheel, so 180deg pushes red toward cyan. drop-shadow() takes offset-x, offset-y, an optional blur radius, and a color, and unlike box-shadow it follows the alpha shape of the content rather than the bounding box, so it wraps around transparent PNGs and irregular graphics. The remaining functions (brightness, contrast, grayscale, invert, saturate and sepia) take a percentage or an equivalent unitless number where 1 equals 100%.
For the percentage functions, 100% (or 1) leaves that aspect unchanged, 0% removes it entirely, and values above 100% push past the original: brightness(150%) brightens, saturate(200%) oversaturates, contrast(50%) flattens tones. grayscale(), invert() and sepia() are clamped between 0% and 100%, while brightness(), contrast() and saturate() accept values well above 100%. Every function has a neutral point that produces no visible change (0px blur, 100% brightness, 0deg hue-rotate, 0% sepia), which is why this generator omits any slider still sitting at its neutral value and writes only the functions you moved.
Filters are GPU-accelerated in modern browsers and are supported across current Chrome, Firefox, Safari and Edge. They are widely used for hover states on thumbnails, dimming background photos behind headline text, building duotone and vintage looks, creating disabled or loading states, and adding soft shadows that follow a shape. Stacking several functions is cheap to write but can be expensive to paint, especially blur on large images or filters animated every frame, so it is worth testing on the lower-end devices you actually care about. Where a filter animates, promoting the element with will-change or keeping blur radii modest helps hold frame rate.
There is one closely related property worth knowing: backdrop-filter. It accepts the exact same functions but applies them to whatever is visible behind the element instead of to the element itself, which is how frosted-glass panels and blurred overlay backgrounds are built. If your blur seems to affect the wrong layer, you almost always want backdrop-filter rather than filter. For accessibility, remember that heavy blur or low contrast on text can fail WCAG contrast requirements, so keep readable states in mind when you dim or desaturate backgrounds.
When to use it
- Creating hover effects on image thumbnails, such as a subtle brightness or saturation lift when the cursor moves over a card.
- Dimming or desaturating a background photo so overlaid headline text stays readable and passes contrast checks.
- Building vintage, duotone or black-and-white looks with sepia, grayscale and hue-rotate combinations.
- Styling disabled or loading UI states by reducing brightness and contrast without editing the source image.
- Adding a soft, shape-following shadow to a transparent PNG or icon with drop-shadow() instead of box-shadow.
- Prototyping a color treatment quickly, then copying the exact filter string into a stylesheet or component.
How to use the CSS Filter Generator
- Drag any slider (blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia) to set its value.
- Watch the sample box update live, or click Use your own image to preview the filter on a photo from your device.
- Combine several sliders to stack filter functions in one declaration; they apply left to right.
- Copy the generated filter CSS and paste it into your stylesheet or an inline style attribute.
- Use Reset filters to return every slider to its neutral value and start again from a clean state.
Formula & method
Worked examples
You want a soft, slightly dimmed background image for a hero section with white text on top.
- Set Brightness to 70% so the image is darker behind the text.
- Set Blur to 4px for a gentle soft-focus look.
- Leave the other sliders at their neutral values so they are omitted from the output.
- The tool writes only the changed functions, in slider order.
Result: filter: blur(4px) brightness(70%);
You want a vintage sepia-toned thumbnail that still has some depth.
- Set Sepia to 80% to wash the image with warm brown tones.
- Set Contrast to 110% to keep it from looking flat.
- Set Saturate to 90% to pull back a little color.
- Read the combined string from the Generated CSS box.
Result: filter: contrast(110%) saturate(90%) sepia(80%);
You want a crisp black-and-white photo for a press or portfolio grid.
- Set Grayscale to 100% to remove all color.
- Set Contrast to 120% to sharpen the tonal range.
- Leave blur, hue-rotate, invert, saturate and sepia neutral.
- Copy the result and apply it on hover or as the default state.
Result: filter: contrast(120%) grayscale(100%);
CSS filter functions, their unit, and neutral (no-effect) value
| Function | Unit / range | Neutral value | Effect |
|---|---|---|---|
| blur() | length (px) | 0px | Softens the element with a Gaussian blur |
| brightness() | percent / number | 100% | Darkens below 100%, brightens above |
| contrast() | percent / number | 100% | Lowers or raises tonal separation |
| grayscale() | 0% to 100% | 0% | Removes color toward black and white |
| hue-rotate() | angle (deg) | 0deg | Rotates all colors around the color wheel |
| invert() | 0% to 100% | 0% | Inverts colors, 100% is a full negative |
| saturate() | percent / number | 100% | Mutes below 100%, oversaturates above |
| sepia() | 0% to 100% | 0% | Applies a warm brown vintage tint |
| drop-shadow() | x y blur color | none | Adds a shadow that follows the content shape |
Common filter recipes you can copy
| Look | Filter CSS |
|---|---|
| Black and white | filter: grayscale(100%); |
| Vintage / sepia | filter: sepia(60%) contrast(110%) saturate(90%); |
| Dimmed hero background | filter: brightness(60%) blur(2px); |
| Bright and punchy | filter: brightness(110%) contrast(120%) saturate(130%); |
| Photo negative | filter: invert(100%); |
| Cool color shift | filter: hue-rotate(200deg); |
| Soft icon shadow | filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); |
filter vs backdrop-filter
| Aspect | filter | backdrop-filter |
|---|---|---|
| Applies to | The element and its own content | The area visible behind the element |
| Typical use | Recoloring or blurring an image or box | Frosted-glass panels and overlays |
| Functions accepted | blur, brightness, contrast, and the rest | The same function set |
| Needs transparency | No | Yes, the element must be semi-transparent to show the effect |
Common mistakes to avoid
- Expecting filter order not to matter. Filter functions are applied left to right, so contrast(150%) blur(2px) is not the same as blur(2px) contrast(150%). If a stacked result looks off, try reordering the functions.
- Confusing filter with backdrop-filter. filter affects the element and its own content. To blur or tint whatever sits behind an element (the frosted-glass effect), you need backdrop-filter, which takes the same functions but a different property name and requires a semi-transparent element to show through.
- Forgetting the unit on blur or hue-rotate. blur() needs a length such as 4px and hue-rotate() needs an angle such as 90deg. A bare number is invalid for these two and the whole declaration is ignored, even though the percentage functions can be written unitless.
- Heavy filters on large images during animation. Blurring or stacking filters on big images and animating them can drop frame rates on lower-end devices. Test on real hardware and keep blur radii modest where smooth animation matters.
- Using drop-shadow() when you meant box-shadow. filter: drop-shadow() follows the alpha shape of the content, which is great for transparent PNGs and icons but is more expensive than box-shadow for plain rectangular boxes. Use box-shadow for simple card shadows.
- Dimming text backgrounds below readable contrast. Lowering brightness or raising blur on a background image can drop text contrast below WCAG minimums. Check the final contrast ratio of overlaid text rather than trusting how it looks on one screen.
Glossary
- filter
- The CSS property that applies one or more graphical effect functions to an element as it is rendered.
- Filter function
- A single effect such as blur(), brightness() or sepia() that takes a value and contributes to the filter chain.
- hue-rotate
- A filter function that rotates every color in the element around the color wheel by a given angle in degrees.
- Neutral value
- The value of a filter function that produces no visible change, such as 100% for brightness or 0px for blur.
- backdrop-filter
- A related property that applies filter functions to the area behind an element rather than to the element itself.
- drop-shadow
- A filter function that adds a shadow following the alpha shape of the content, unlike the rectangular box-shadow.
- Gaussian blur
- The smooth, bell-curve blur used by blur(), where a larger radius spreads each pixel further and softens the image more.
- GPU acceleration
- Offloading filter rendering to the graphics processor, which makes filters fast but still bounded by image size and animation cost.
Frequently asked questions
What does the CSS filter property do?
The filter property applies visual effects such as blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia and drop-shadow to an element as the browser paints it. The original content is not changed, so you can add, animate or remove the effect freely with CSS or JavaScript.
Can I combine multiple filters at once?
Yes. List several functions separated by spaces in a single filter declaration, for example filter: contrast(120%) blur(2px) sepia(40%). They are applied in the order written, so changing the order can change the result. This generator stacks every slider you move into one string automatically.
Does the CSS filter change my actual image file?
No. Filters are applied at render time and never alter the source file or element content. The effect lives only in the stylesheet, so removing the filter restores the original appearance instantly. To bake the effect into a file you would need an image editor instead.
Is the image I upload sent anywhere?
No. When you load your own image it is read locally with a browser object URL and previewed entirely on your device. Nothing is uploaded to any server, so the tool works fully offline and your image stays private.
What is the difference between filter and backdrop-filter?
filter applies effects to the element itself and its content. backdrop-filter applies the same functions to whatever is visible behind the element, which is how frosted-glass and blurred-background overlays are built. They share function names but are separate properties, and backdrop-filter needs the element to be semi-transparent to show through.
How do I make an image black and white with CSS?
Use filter: grayscale(100%); to fully remove color. For a crisper look add contrast, for example filter: grayscale(100%) contrast(120%);. Set grayscale back to 0% (or remove it) to restore the original colors, which makes it ideal for hover states.
How do I blur a background image but keep the text sharp?
Put the blur on the image or a dedicated background layer, not on the container that holds the text, because filter blurs an element and all of its children. A common pattern is a blurred background div behind a separate, unfiltered text div, or backdrop-filter on a translucent panel.
Why is my CSS filter not working?
The most common causes are a missing unit (blur and hue-rotate require px and deg), a typo in a function name, or applying filter to an element that has no painted area. Also check that a later rule is not overriding your filter, and confirm the property is not being reset to none elsewhere.
Do CSS filters hurt performance?
Filters are GPU-accelerated and cheap for small static elements, but blur on large images and filters animated every frame can lower frame rates on weaker devices. Keep blur radii modest, avoid animating heavy stacks, and test on real low-end hardware if smoothness matters.
Which browsers support the CSS filter property?
The filter property is supported in all current versions of Chrome, Firefox, Safari and Edge. Support is very broad, though if you target older browsers it is worth confirming and providing a sensible fallback for the unfiltered state.
Sources
- CSS filter property , MDN Web Docs
- CSS backdrop-filter property , MDN Web Docs
- Filter Effects Module Level 1 , W3C