How css filter generator works
The CSS filter property applies image-processing effects to an element: blurring, recoloring, brightening, adding shadows. Each effect is a function — blur(4px), brightness(120%), grayscale(50%), hue-rotate(30deg) — and you can stack them space-separated: filter: blur(4px) saturate(150%). The functions apply in the listed order, and each works on the output of the previous one, so blur then saturate is not the same as saturate then blur.
This generator handles all nine core functions plus drop-shadow. Every function has a neutral value at which it does nothing: blur 0, brightness and contrast 100%, grayscale and sepia and invert 0%, hue-rotate 0deg, opacity 100%, saturate 100%. Functions left at their neutral value are omitted from the output, so you get the shortest CSS that produces exactly the look you dialed in. The numbers are validated too: percentages that only make sense in a range (like grayscale, capped at 100%) are enforced while open-ended ones like brightness can exceed 100% for over-exposure effects.
The live preview applies your filter stack to a sample box so you can judge the result before copying. Drop-shadow takes its own offset, blur and color — it is the filter version of box-shadow that follows the alpha shape of the element, which makes it the right tool for PNG cut-outs and transparent SVG icons where box-shadow would just draw a rectangle. Copy the final declaration and paste it into any stylesheet.