~/css/filter-generator
CSS Filter Generator
Edit images and elements with CSS filters instead of a photo editor: blur, brightness, contrast, grayscale, hue rotation, invert, saturation, sepia, opacity and a drop shadow. Toggle backdrop mode to filter what is behind an element instead.
Using the CSS Filter Generator
What CSS filters do
The filter property applies graphic effects to an element as the browser paints it: blurring, colour shifts, desaturation and more. The original image or element is untouched, so you can change or remove the effect at any time, and animate it.
Order and combining
Filters run left to right, each working on the result of the previous one, so grayscale() sepia() differs from sepia() grayscale(). The generator only writes the filters you have changed from their defaults, keeping the CSS short.
Useful recipes
Grayscale 100% with a transition back to 0 on hover makes a classic logo wall. A slight brightness drop with blur makes a background image recede behind text. Hue rotation recolours icons. Invert with a 180 degree hue rotation is a rough dark-mode trick for diagrams.
Filter versus backdrop-filter
filter affects the element itself. backdrop-filter affects whatever is behind the element, which is how frosted glass works. Tick the option to output the backdrop version.
Filters on hover and focus
Filters animate smoothly with a transition, which makes them handy for interaction feedback: a gallery thumbnail can go from grayscale to full colour, or brighten slightly, on hover and keyboard focus. Apply the same effect to :focus-visible so keyboard users get the same feedback as mouse users.
Frequently asked questions
Do filters slow the page down?
Light filters are fine. Large blur radii on big elements, especially when animated, can be heavy on phones.
Why does drop-shadow differ from box-shadow?
drop-shadow follows the visible shape of the element, including transparent areas in PNG and SVG, while box-shadow follows the rectangle.
Can I filter only part of an image?
Not directly. Overlay a positioned element with backdrop-filter over the area you want to change.