Mix-blend-mode chooses how an element's pixels combine with the rendered backdrop in its stacking context. It is distinct from background-blend-mode, which blends an element's own background layers.
Make this comfortable
CSS mix-blend-mode: confine decorative blending to one surface
When to use it
A case-card watermark may blend softly into a colored card background. Isolate the card first so the watermark does not interact with unrelated content behind it, and keep the actual case status as plain text above the decorative layer. The sample uses multiply on the watermark only. Test the card on light and dark surfaces, in print, and with the watermark hidden. If the card includes a link, ensure its underline and focus outline remain clear against every blended result. Do not use blending to create the sole readable copy of a label: changing backdrops can invert or erase contrast. An isolated component still needs a reviewed foreground/background pair for all required information.
.case-card { position: relative; isolation: isolate; background: #e8f0f3; }
.case-card__watermark { mix-blend-mode: multiply; opacity: .25; pointer-events: none; }Cost and verification
Blend operations can increase paint or compositing work, especially across many large, scrolling cards. Profile a realistic list before keeping the effect. The cheaper design may be a static background color or a precomposed decorative asset. Isolation changes stacking behavior, so inspect popovers and positioned badges after adding it. Contrast must be tested on the final composited pixels, not the source colors alone. Blending cannot protect data or substitute for an accessible status. If print settings omit background colors, the content must remain understandable.
Common Mistakes
- Do not blend required text with an unpredictable backdrop.
- Do not confuse mix-blend-mode with background-blend-mode.
- Do not skip stacking and performance checks on a repeated component.
Connected lessons
- CSS Property Decisions
- CSS isolation: give a component a stacking boundary
- CSS color and contrast: pair text with its real surface
- CSS gradients and shadows: decorate without hiding content
Further rendering decisions
css
reference
web