🎛️ CSS Filter Generator

Build a CSS filter value visually — adjust blur, brightness, contrast, saturation, grayscale, sepia, invert and hue-rotate with live preview, then copy the generated CSS.

Blur (px): 0

Brightness (%): 100

Contrast (%): 100

Saturate (%): 100

Grayscale (%): 0

Sepia (%): 0

Invert (%): 0

Hue Rotate (deg): 0

What each function actually does to a pixel

All eight functions are emitted every time, in a fixed order, and applied left to right - each one works on the output of the one before it:

filter: blur(0px) brightness(100%) contrast(100%) saturate(100%)
        grayscale(0%) sepia(0%) invert(0%) hue-rotate(0deg);

That line is the neutral state. Underneath, brightness is a straight multiplier on each channel, contrast pivots around the midpoint as out = (c - 0.5) × amount + 0.5, and invert interpolates toward the opposite as out = p + c × (1 - 2p), which is why invert(50%) flattens any image to a single grey. Grayscale and saturate share one colour matrix built on the luminance weights 0.2126 red, 0.7152 green, 0.0722 blue - grayscale(100%) and saturate(0%) are the same operation.

Getting a usable value out

Delete the neutral functions. A rule carrying brightness(100%) and grayscale(0%) costs you nothing visually but makes the CSS harder to read. Keep only the sliders you moved.
Order is not cosmetic. Blurring then inverting looks different from inverting then blurring. Rearrange the copied value if the fixed order is not what you want.
Saturate goes past 100%. The slider runs to 300%, which pushes colours beyond the source gamut and clips them.

Any non-none filter makes the element a new stacking context and a containing block for its position: fixed descendants - a fixed header inside a filtered wrapper will start scrolling with the page. Blur is also the expensive one; animate opacity or transform instead where you can.

Frequently asked questions

How do I make an image black and white in CSS?

filter: grayscale(100%). saturate(0%) gives the identical result, since both collapse the pixel onto its luminance using the 0.2126 / 0.7152 / 0.0722 weights.

Does hue-rotate change colours the same way an HSL hue shift does?

No. hue-rotate is a fixed linear matrix that approximates the rotation, so saturated colours land somewhere slightly off and lightness can drift. It is fast rather than exact.

What is the difference between filter: blur and backdrop-filter: blur?

filter blurs the element and its contents. backdrop-filter leaves the element sharp and blurs whatever is behind it, which is what frosted-glass panels use.