CSS Filter Playground

Stacks blur, brightness, saturation, hue and drop-shadow filters on a sample and emits the CSS.

Stacks the CSS filter functions on a sample and gives you the declaration. The preview is rendered by the browser’s own `filter` property, so what you see is definitionally what the CSS does rather than an approximation of it. The extra thing here is the equivalent `feColorMatrix`: every one of these functions except blur and drop-shadow is affine in RGBA, so a chain of eight collapses into twenty numbers.

🔒 Runs entirely in your browsercssfiltereffects

Preview

Rendered by the browser's own filter property, so this is what the CSS below does — not an approximation of it.

CSS

filter: none;

Filters

brightness1A linear multiply on every channel. 0 is black, 1 is unchanged.contrast1Slope around 0.5. Everything past the ends clips, and clipped is gone.saturate1saturate(0) is exactly grayscale(1) — the spec defines them as the same matrix.grayscale0Rec. 709 coefficients applied to gamma-encoded values. That mismatch is in the spec, and reproducing it is what makes this agree with a browser.sepia0Interpolates towards a fixed matrix. sepia(1) turns white into rgb(255,255,239) — the blue row sums to 0.937, which is what makes it read warm rather than merely dim.hue-rotate0degA rotation about the luminance axis of the non-linear RGB cube — not a perceptual hue rotation. hue-rotate(180deg) does not give you the complementary colour.invert0Still affine: v → v(1−2a) + a.opacity1Alpha only.blur0pxSpatial, so it cannot collapse into the matrix — and it is the one that costs real GPU time.

drop-shadow

How to use it

Choose what to look at
Flat swatches show what happens to specific colours, the gradient shows what happens across a range including the greys, and your own image shows what happens to the thing you are actually filtering. Judge on the last one before shipping.
Move the functions you need
Anything left at its neutral value is omitted from the output entirely, so the CSS stays as short as what you actually changed. Order matters and follows the order of the list.
Add drop-shadow last if you want one
It is a separate block because it takes three numbers and a colour rather than one amount, and because it follows the alpha channel — it traces the shape of a transparent PNG rather than its box.
Take the CSS, or take the matrix
The CSS is for a stylesheet. The `feColorMatrix` is for an SVG filter, a shader, or any pipeline where running eight passes to do what one matrix multiply does is worth avoiding.

Common questions

Why is blur missing from the matrix?

Because it is spatial: a blurred pixel depends on its neighbours, and a colour matrix only ever looks at one pixel at a time. The same goes for drop-shadow. The panel names whichever ones could not collapse and leaves them as a separate step rather than quietly dropping them.

hue-rotate(180deg) did not give me the complementary colour.

It never does. The function is a rotation about the luminance axis of the non-linear RGB cube, which the spec defines with a fixed matrix — it is not a perceptual hue rotation and it was not designed to be one. For an actual complement, rotate the hue in OKLCH with the colour converter or the palette generator.

Does grayscale(1) use the right luminance coefficients?

It uses the ones the spec mandates: Rec. 709, applied to gamma-encoded values. Applying luminance weights to non-linear values is, strictly, wrong — a proper desaturation linearises first. The spec says to do it this way and browsers do, so this reproduces the mismatch rather than correcting it, because agreeing with the browser is the point.

Does this cover backdrop-filter?

The functions are the same, so the value you copy is valid there too. What is different is the source — `backdrop-filter` filters whatever is painted behind the element, not the element — so the preview here will not tell you how a frosted panel looks over your real content. Paste it into the page and look.