Learn Computer Academy

CSS Filter Studio

Stack, reorder, and combine every CSS filter function — including drop-shadow() and a separate backdrop-filter stack for glass panels.

Browse CSS lessons

Preview

backdrop-filter: blur(4px)

Presets

Replaces the filter stack — fully editable afterwards.

How this works

Filter functions apply left to right, each to the result of the one before it — the same functions in a different order can look different. grayscale() then sepia() tints a black-and-white image; sepia() then grayscale() erases the tint entirely, since grayscale() zeroes out colour last.

filter

Applies to the element itself — the image, card, or text below.

Multiplies colour intensity. 100% is unchanged; 0% is identical to grayscale(100%); above 100% oversaturates.

backdrop-filter

Applies to whatever shows through BEHIND the element, not the element itself — this is what makes a translucent glass panel readable over a busy background. Needs the element to have some transparency to show anything through.

Gaussian-blurs the element. Unlike backdrop-filter, this blurs the element and its own children/content, not what’s behind it.

Output

filter: saturate(150%);
backdrop-filter: blur(4px);