CSS Filter Playground

CSS filter supports blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), and drop-shadow(). You can chain multiple filters in a single declaration. All filters are GPU-accelerated in modern browsers.

filter applies effects to the element itself and its contents, while backdrop-filter applies effects to the area behind the element. Use backdrop-filter for frosted glass effects — combine it with a semi-transparent background color.

Yes — CSS filters work on any element including SVGs and images. For more advanced effects, SVG has its own filter system (<filter> element) that supports additional primitives like feDisplacementMap, feTurbulence, and feMorphology that CSS filters cannot replicate.

Simple filters like brightness and contrast are very fast (GPU-composited). blur() is more expensive, especially with large radii. backdrop-filter can be costly on large areas. For animations, filters trigger only compositing — no layout or paint — making them one of the most performant properties to animate.