TTULAKITO
Designer

CSS Filter Generator

Combine blur, brightness, contrast, and more into a CSS filter.

All tools

Filters

CSS

filter: blur(0px) brightness(100%) contrast(100%) grayscale(0%) hue-rotate(0deg) saturate(100%);

Frequently asked questions

What's the difference between filter and backdrop-filter?
filter applies effects to the element itself and its children, while backdrop-filter applies them to whatever is behind the element through any transparent background. backdrop-filter is what enables frosted-glass UI.
Will CSS filter hurt performance?
Filters like blur and drop-shadow are GPU-accelerated but still expensive at large radii or full-screen sizes. Avoid stacking many filters on scrolling elements, especially on lower-end mobile devices.
What's the difference between filter: drop-shadow and box-shadow?
box-shadow follows the element's rectangular box, while drop-shadow follows the actual painted pixels including transparent PNG cutouts and rounded SVG edges. Use drop-shadow for icons and irregular shapes.