Tools

CSS Filters Playground

Stack filter functions and watch them apply in real time, then copy the exact CSS. Great for image treatments, hover states and mood. Nothing is uploaded.

Blur 0px

Brightness 100%

Contrast 100%

Saturate 100%

Hue-rotate 0deg

Grayscale 0%

Sepia 0%

Invert 0%

CSS

About CSS filters

The filter property applies graphical effects like blur and color shifts to an element and its contents, all on the GPU. You can chain several functions in one declaration and they apply in order, so grayscale(1) brightness(1.2) reads differently than the reverse.

Common uses: softening a hero image, dimming a background behind text, building duotone hover states with grayscale + sepia + hue-rotate, or a frosted look (pair with the glassmorphism generator, which uses the related backdrop-filter). Keep heavy blurs to a few elements; filters cost more than a flat paint.