Capítulo 24 de 29
filter and backdrop-filter each expose the same 9 CSS filter functions as parallel utility families (blur-*/backdrop-blur-*, brightness-*/backdrop-brightness-*, etc.) — filter affects the element's own rendering, backdrop-filter affects whatever is visible behind a translucent element (the "frosted glass" effect).
Each row below has a filter-based utility and its backdrop- counterpart — same suffix grammar (-<number>, -(<custom-property>), -[<value>]) on both:
| Filter function | filter utility | backdrop-filter utility |
|---|---|---|
blur() | blur-xs → blur-3xl (7 steps, --blur-*), blur-none | backdrop-blur-xs → backdrop-blur-3xl, backdrop-blur-none |
brightness() | brightness-<number> | backdrop-brightness-<number> |
contrast() | contrast-<number> | backdrop-contrast-<number> |
grayscale() | grayscale (100%), grayscale-<number> | backdrop-grayscale, backdrop-grayscale-<number> |
hue-rotate() | hue-rotate-<number> (deg), negatable | backdrop-hue-rotate-<number>, negatable |
invert() | invert (100%), invert-<number> | backdrop-invert, backdrop-invert-<number> |
opacity() | (use the opacity utility instead — Effects chapter) | backdrop-opacity-<number> |
saturate() | saturate-<number> | backdrop-saturate-<number> |
sepia() | sepia (100%), sepia-<number> | backdrop-sepia, backdrop-sepia-<number> |
drop-shadow() | drop-shadow-xs → drop-shadow-2xl (--drop-shadow-*), drop-shadow-none, color composes independently via drop-shadow-<color>/drop-shadow-(color:<custom-property>) | (no backdrop equivalent) |
filter-none/backdrop-filter-none clear the whole stack (all sub-filters at once); each individual sub-filter also has a value that effectively disables just itself (e.g. blur-none, grayscale-0).background-image/box-shadow, every sub-filter sets its own CSS variable and the filter/backdrop-filter property references all of them — so blur-sm grayscale (Effects/Styling with Utility Classes chapters) combines cleanly instead of one utility overwriting the other.filter-[<value>]/filter-(<custom-property>) and their backdrop equivalents let you set the whole property to a hand-written multi-function value when the individual utilities aren't enough.
<div class="bg-white/30 backdrop-blur-md">
<p>Content sits on a blurred, semi-transparent panel.</p>
</div>
<img class="drop-shadow-lg drop-shadow-black/30" src="/icon.png" alt="" />
<img class="grayscale contrast-125 hover:grayscale-0 transition" src="/photo.jpg" alt="" />
backdrop-blur-* for the frosted-glass UI pattern (needs a translucent background color to be visible), drop-shadow-* for shape-following shadows on transparent images, and composing multiple filters that transition together on hover.drop-shadow-* instead of box-shadow when the element has transparency (icons, logos, PNGs) — box-shadow only follows the element's rectangular box, drop-shadow follows the actual rendered alpha shape.backdrop-blur-* needs a translucent background (bg-white/30, bg-black/20, ...) on the same element to be visible — it blurs what's behind, not the element's own background.blur-sm grayscale contrast-125 in one class list works exactly like combining color stops on a gradient.backdrop-opacity equivalent via the plain opacity utility — backdrop-opacity-* is specifically for fading the filter stack itself, separate from the element's own opacity.box-shadow/mix-blend-mode/composable CSS-variable utilities are the sibling family covered there.background-blend-mode shares the "blend against what's behind/beneath" concept with backdrop-filter, but via a different mechanism.