The essentials
Quick reference
One focused task per row. Jump to the related section for complete, working examples.
| Use | Syntax | Examples |
|---|---|---|
| Chain element filters | .photo {
filter: saturate(1.2) contrast(1.1) brightness(0.95);
} | View examples |
| Blur rendered pixels | .preview { filter: blur(6px); } | View examples |
| Shadow an alpha shape | .logo {
filter: drop-shadow(0 0.5rem 0.5rem rgb(0 0 0 / 35%));
} | View examples |
| Reference an SVG filter | .art { filter: url("filters.svg#rough-paper"); } | View examples |
| Filter the backdrop | .panel {
background: rgb(15 23 42 / 78%);
backdrop-filter: blur(12px);
} | View examples |
| Gate backdrop enhancement | @supports (backdrop-filter: blur(1px)) {
.panel { backdrop-filter: blur(12px); };
} | View examples |
| Blend an element | .texture { mix-blend-mode: multiply; } | View examples |
| Bound a blend group | .poster { isolation: isolate; } | View examples |
| Blend background layers | .hero { background-blend-mode: multiply, normal; } | View examples |
| Reset to normal compositing | .hero { background-blend-mode: normal; } | View examples |
| Honor reduced transparency | @media (prefers-reduced-transparency: reduce) {
.glass { backdrop-filter: none; };
} | View examples |
| Retain a legible base | .glass {
color: white;
background-color: rgb(15 23 42 / 92%);
} | View examples |
| Transition a bounded property | .card { transition: filter 160ms ease-out; } | View examples |
Filters alter an element's rendered image, backdrop filters alter pixels behind it, and blend modes control how source and backdrop colors combine. These effects can create strong hierarchy, but they also create stacking contexts, increase paint cost, and reduce legibility unless a solid, accessible baseline comes first.
Step by step
Detailed examples
Filter the rendered element as an image
filter accepts functions such as blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), drop-shadow(), and url(). Functions run in written order, so reordering can change the result. A non-none filter creates a stacking context and containing block behavior similar to transform. drop-shadow() follows the rendered alpha shape; box-shadow follows the box.
.product-photo { filter: none; transition: filter 160ms ease-out; }
.product-card:hover .product-photo { filter: saturate(1.15) contrast(1.08); }
.product-logo { filter: drop-shadow(0 .35rem .3rem rgb(15 23 42 / .35)); }
@media (prefers-reduced-motion: reduce) { .product-photo { transition: none; } }Filter only pixels behind a surface
backdrop-filter applies to the backdrop behind an element, so visible results normally require transparency. Start with a sufficiently opaque background because unsupported filters, forced colors, screenshots, and busy imagery can otherwise destroy contrast. Large blurred regions and continuously moving backdrops can be costly; reduce the affected area and avoid animating blur radius.
.glass { color: white; background: rgb(15 23 42 / 92%); border: 1px solid rgb(255 255 255 / 20%); }
@supports (backdrop-filter: blur(1px)) {
.glass { background: rgb(15 23 42 / 76%); backdrop-filter: blur(12px) saturate(1.15); }
}Control which backdrop participates in blending
mix-blend-mode blends an element with the backdrop established by compositing and stacking rules. Results can change when surrounding colors change. isolation:isolate creates a new isolated group and is the reliable way to stop descendants from blending with content behind the component. Do not place essential text or status meaning in an unpredictable blend relationship.
.poster { position: relative; isolation: isolate; background: #fde68a; }
.poster__ink { position: absolute; inset: 0; background: #2563eb; mix-blend-mode: multiply; }
.poster__title { position: relative; color: #111827; }
@media (forced-colors: active) { .poster__ink { display: none; } }Blend backgrounds without blending descendants
background-blend-mode combines an element's background layers and background color; it does not blend the element's foreground children. Mode values repeat or truncate to match the number of background images. Keep the final color usable when images fail, and remember that blend results depend on source color spaces and may vary around wide-gamut content.
.hero {
color: white;
background-color: #1e3a8a;
background-image: linear-gradient(rgb(30 58 138 / .35), rgb(15 23 42 / .8)), url("hero.jpg");
background-size: cover;
background-position: center;
background-blend-mode: multiply, normal;
}Preserve readability and control rendering cost
Test text contrast over every possible image state; a filter does not make an unknown backdrop reliably accessible. forced-colors may replace colors, while prefers-reduced-transparency is newer and not universal, so the base surface must already work. Blur and backdrop sampling enlarge paint regions and can consume substantial GPU memory. Profile real devices, keep filtered regions small, and never add will-change permanently without evidence.
.notice { color: #fff; background: rgb(15 23 42 / .94); }
@supports (backdrop-filter: blur(1px)) { .notice { background: rgb(15 23 42 / .8); backdrop-filter: blur(8px); } }
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
.notice { background: Canvas; color: CanvasText; backdrop-filter: none; border: 1px solid CanvasText; }
}Local code tester
Compare isolated backdrop and blend effects
The card keeps a readable base color while its decorative circles blend only inside the isolated composition.
Sources and further reading
References
Authoritative documentation used to verify and expand this cheat sheet.
Help us improve
Found a typo or missing example?
Tell us what would make this cheat sheet clearer, more complete, or more useful.