CSS Filter Generator

Filter functions

Adjust the nine visual filter functions — blur, brightness, contrast, saturate, grayscale, sepia, hue-rotate, invert, and opacity — with a slider or a precise number. Each function has its own on/off switch, and changing a value turns it on automatically. Output always follows the CSS order, so the declaration only changes when you change it.

drop-shadow gets its own panel with x/y offsets, blur, color, and opacity, and is appended after the simple functions.

Live preview

The preview card updates as you tune the filters. Switch the background between light, dark, white, and slate, or upload a photo (it never leaves your browser) to judge the effect on a real image. Everything is computed locally.

filter and backdrop-filter

Flip the switch to output backdrop-filter instead of filter. In that mode the sample card becomes translucent so you can see the frosted-glass blur of whatever sits behind it — useful for the effect bars and overlays built on backdrop-blur.

Import and export

• CSS: filter: blur(4px) brightness(120%);
• Tailwind: [filter:blur(4px)_brightness(120%)], or filter-none when nothing is enabled.
• Paste an existing filter: or backdrop-filter: value into the import box to keep editing it here.

Your settings and preview background are saved in this browser.