CSS Filter Functions Table
| Function | What it does | Field note |
|---|---|---|
blur(px) | Gaussian softening | Animating blur on large areas costs GPU - cheap on icons, pricey full-screen |
brightness / contrast | Multiplier grades | 0.6 and 1.4 do quick photo fixes with zero image editor |
grayscale / sepia / invert | Color mode switches | grayscale on hover calms image grids; invert flips dark mode leftovers |
drop-shadow() | Shadow from the ALPHA | Traces the transparent PNG cutout - box-shadow only ever draws rectangles |
hue-rotate(deg) | Spins the color wheel | One-line accent recolor for icon sets and illustrations |
filter chains | blur(2px) contrast(1.2) | Compose in order - blur-then-contrast differs from contrast-then-blur |
backdrop-filter | Filters what is BEHIND | The frosted-glass primitive - needs a translucent background or it shows nothing |
containing block | Filters create one | fixed-position children re-anchor to the filtered element - the subtle layout gotcha |
Filters are post-processing: the element renders completely first, THEN the filter is applied to the result. That ordering explains the family's signature trick - drop-shadow() follows a transparent PNG's silhouette because it sees the rendered alpha, while box-shadow can only ever draw the border box rectangle.
Bottom line: backdrop-filter is the frosted-glass primitive - it filters whatever is BEHIND the element, which only shows through a translucent background color (opaque background = nothing to frost = invisible effect). Filters promote their own compositing layer, so animating them is GPU-cheap; a full-screen blur is the exception that phones pay for in battery.
The honest part: filter chains compose in ORDER - blur(4px) then contrast(1.5) hardens the blur's soft edges into an ink-sketch look, while contrast-then-blur just smudges. The order is part of the design vocabulary, not an implementation detail.
How to use
- Grade photos without an editor: filter: brightness(0.9) contrast(1.15) saturate(1.1) - three multipliers replace a round-trip to an image tool.
- Glass card: background: rgba(255,255,255,0.15) plus backdrop-filter: blur(12px) - the translucency is what lets the frost show; add a 1px translucent border.
- Recolor an icon set: filter: hue-rotate(140deg) on the sprite container - one rule, every accent color, zero new assets.
Frequently asked questions
Why does drop-shadow follow my logo's outline but box-shadow draws a box?
They shadow different inputs. box-shadow paints a rectangle matching the border box - it never looks at the pixels. drop-shadow is a filter: it runs AFTER rendering, sees the actual alpha channel of the result, and shadows that silhouette - so a transparent PNG star gets a star-shaped shadow. The corollary: drop-shadow costs more (it reads the rendered layer) and cannot take the spread argument box-shadow has. Use box-shadow for cards and rectangles, drop-shadow when the shape itself must cast.
Why is my backdrop-filter blur invisible?
Because there is nothing behind the element for it to blur - or nothing showing through. backdrop-filter filters the content BEHIND the element's backdrop, visible only where the element's own background is translucent. An opaque card background hides the effect completely; a fully transparent background shows it but reads as a floating smudge. The working recipe is a translucent background (rgba white at 10-20%), optionally a 1px translucent border to catch the edge - the glass look is the COMBINATION, never backdrop-filter alone.
Are filter animations performance-safe?
Better than most visual animations, with one trap. Filters promote the element to its own compositing layer, so animating blur or brightness is handled by the GPU compositor without re-layout - smooth where animating width or box-shadow would stutter. The trap is COST PER FRAME: a blur over a large area (full-screen hero, long modal backdrop) makes the GPU repaint a big texture every frame, which shows up as battery drain and thermal throttling on phones more than as dropped frames on desktops. Small elements animate freely; be suspicious of full-viewport blurs.
What does it mean that filters create a containing block?
A filtered element becomes the reference box for its absolutely-positioned and fixed-position descendants - they position against the filtered element, not the viewport. A fixed cookie banner inside a filtered container stops being fixed to the screen and anchors to the container instead. The same re-anchoring happens with transform and will-change, so when a fixed child mysteriously scrolls away, look up the ancestor chain for filter, transform or backdrop-filter - removing the filter (or moving the fixed child out) restores the viewport anchoring.