CSS Filter Generator

Create CSS filter effects — blur, brightness, contrast, grayscale, hue, sepia, drop-shadow — with a live before/after preview.

How do I apply filters to images with CSS?

Adjust the sliders for blur, brightness, contrast, saturation, grayscale, sepia, hue rotation, invert, opacity and drop shadow, compare the before and after preview, and copy the CSS filter declaration — plus an optional backdrop-filter version for frosted-glass effects.

Popular recipes

Black and white: filter: grayscale(100%)
Vintage: sepia(60%) contrast(110%)
Dim on hover: brightness(80%)
Shadow that follows transparent PNG shapes: drop-shadow(0 8px 12px #0005)

The order matters — filters are applied left to right. Filters are GPU-accelerated but heavy blur on large areas can slow down scrolling.

Frequently asked questions

filter vs backdrop-filter?

filter changes the element itself; backdrop-filter changes what is behind it.

Do all browsers support it?

Yes, all modern browsers.

Is it free?

Yes.