CSS Filter Generator
Stack CSS filters on a photo, a transparent logo or your own image: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow. Copy it as filter or frosted-glass backdrop-filter, in CSS or Tailwind.
Presets
Property
filter changes the element itself. backdrop-filter changes whatever is behind it (frosted glass).Colour & light
Blur
Drop shadow
Order
Filters run in this order, and the order can change the result.Output
Preview image
Your image stays on your device. It is never uploaded or saved.What Are CSS Filters?
Photo-editor style effects that the browser applies to an element as it draws it.
The filter property applies graphical effects to an element and everything inside it: images, text, backgrounds, even video. You can blur it, change its brightness, contrast or saturation, turn it grey or sepia, shift its colours, invert it or add a shadow that follows its shape.
Filters are written as a space-separated list such as filter: contrast(120%) saturate(130%). They run from left to right, each working on the result of the previous one, so the order can change the outcome.
backdrop-filter takes the same functions but applies them to whatever is behind the element. With a semi-transparent background it gives the frosted-glass effect used in modern navigation bars, modals and cards.
Because filters are applied while drawing, they don't change the page layout and they don't alter your image file. To keep scrolling smooth, avoid very large blur values on big areas, especially when animating.
Filter Functions
What each function does and its neutral (no-effect) value.
brightness() · contrast()
100% is unchanged. Below darkens or flattens the image, above brightens or punches it up. 0% gives black or flat grey.
saturate() · grayscale() · sepia()
saturate: 100% is unchanged, 0% is grey, over 100% is more vivid. grayscale and sepia: 0% is unchanged, 100% is the full effect.
hue-rotate() · invert()
hue-rotate turns all colours around the colour wheel by an angle. invert(100%) gives a negative, and invert(50%) turns everything mid-grey.
opacity()
Like the opacity property, but it can sit anywhere in the filter chain.
blur()
A Gaussian blur with the given radius in pixels. Blurred edges spread outside the element's box.
drop-shadow(x y blur colour)
A shadow that follows the visible pixels, including transparent PNG/SVG shapes and text, unlike the rectangular box-shadow. There's no spread value.
How to Use the CSS Filter Generator
Get your result in under ten seconds.
Pick filter or backdrop
Use filter to change the element itself, or backdrop-filter for frosted glass over what's behind it.
Adjust the filters
Drag the sliders or start from a preset. Reorder active filters if needed, and hold “Hold to compare” to see the original.
Copy the code
Copy the CSS or the Tailwind class.
Why Use the CSS Filter Generator on Developers Web Tools
Fast, accurate and private — built for developers.
All 10 filters
Every CSS filter function, including drop-shadow with colour and opacity.
Reorderable
Change the order of active filters and watch the result update.
Your own image
Preview on your own photo or logo. It stays on your device.
backdrop-filter
Switch to frosted-glass mode, with an optional -webkit- prefix for older Safari.
Tailwind too
Ready-to-paste classes that work in Tailwind v3 and v4.
Private
Runs entirely in your browser.
Frequently Asked Questions
Yes. filter works unprefixed in all current browsers. backdrop-filter works unprefixed in Chrome, Edge, Firefox and Safari 18+. Safari 17 and older need -webkit-backdrop-filter, which this tool can add.
Yes. Each filter works on the output of the previous one. For example, grayscale(100%) hue-rotate(90deg) is plain grey (there's no colour left to rotate), while hue-rotate(90deg) grayscale(100%) converts the rotated colours to grey.
box-shadow is always the shape of the element's box (with border-radius). drop-shadow follows the actual visible pixels, so a transparent PNG, an SVG icon or text gets a shadow in its own shape. drop-shadow has no spread or inset.
The element needs a transparent or semi-transparent background (for example rgba(255, 255, 255, 0.2)), and there must be something behind it to filter. A fully opaque background hides the effect.
A common trick is invert(100%) hue-rotate(180deg): it inverts lightness and then rotates the hues back, so colours stay roughly the same while light and dark swap.
Simple colour filters are cheap. Large blur radii on big areas, and especially animated blur or backdrop-filter, cost more, so keep them small and test on phones.
No. The image is opened locally in your browser to show the preview. It is never uploaded and not saved, so after a reload the sample photo is shown again.
Your filter settings are saved in your own browser (local storage). Press Reset to clear them.