What CSS filters are available?

blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate, invert, opacity, and drop-shadow. They can be chained in a single filter declaration and animated with transitions.

Can I animate CSS filters?

Yes. Use transition: filter 0.3s ease and change filter values on hover or other states. Filters are GPU-accelerated, so animations are generally smooth.

What is the difference between filter and backdrop-filter?

filter applies effects to the element itself and its contents. backdrop-filter applies effects to the area behind the element, creating glass and blur overlay effects.

CSS Filter Effects: Blur & Grayscale

🔬

Try CSS Filter Playground

Free, no signup →