CSS background-blend-mode: keep the layer order explicit

When to use it

A maintenance notice uses two CSS gradients over a flat blue background. The top gradient adds a subtle highlight and the second adds a darker edge; neither carries information. The text and action link remain readable against the whole result. Keep a solid background-color before the gradient declarations so an engine that ignores blending still has a usable panel. Test the palest and darkest parts of the surface, not just the center. A background image can fail to load or be disabled, and forced-colors modes may discard authored decoration. Because this design uses generated gradients, it adds no image request, though the browser still has to paint the composed layers. Do not use blend mode to rescue low-contrast text on a photograph; crop, overlay, or place the text on a solid surface instead. The rendered composite can vary with the color values behind it, so a small theme change requires contrast review rather than an assumption that the mode remains safe.

.maintenance-note { color: #fff; background-color: #173f56; background-image: linear-gradient(135deg, rgb(255 255 255 / 18%), transparent 55%), linear-gradient(0deg, rgb(0 0 0 / 25%), transparent 70%); background-blend-mode: screen, multiply; padding: 1rem; }
@media (forced-colors: active) { .maintenance-note { background-image: none; border: 1px solid CanvasText; } }

Cost and verification

Each extra background layer adds paint work; ordinary small cards are unlikely to be a bottleneck, but large scrolling surfaces should be profiled if effects pile up. No network request is added by a gradient. The comma order is easy to break when a designer adds a new image layer but leaves the mode list unchanged; browsers repeat or trim mode values to match the layers. Check the actual composite after any such edit. Text contrast is judged against the final painted background, not the raw base color. Preserve a solid base and ensure the notice is still understandable when decorative images are absent.

Common Mistakes

• Do not confuse background-blend-mode with mix-blend-mode.
• Do not add a background layer without checking its corresponding mode.
• Do not assume base-color contrast proves contrast over every blended region.

Connected lessons

• CSS Property Decisions
• CSS mix-blend-mode: confine decorative blending to one surface
• CSS backgrounds: reserve background images for decoration
• CSS color and contrast: pair text with its real surface
• CSS dark mode and forced colors: honor distinct user settings