Codectionary / Developer documentation / CSS

Containing Blend Effects with isolation

mix-blend-mode blends an element with its backdrop. isolation: isolate creates a new isolated blending group so its descendants do not unexpectedly blend with content outside that group. This is useful for overlapping decorative shapes and illustrations.

Syntax

.art { isolation: isolate; }
.shape { mix-blend-mode: multiply; }

Examples

Containing Blend Effects with isolation: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.art { isolation: isolate; position: relative; width: 16rem; height: 10rem; background: white; }
.shape { position: absolute; top: 1rem; width: 8rem; height: 8rem; border-radius: 50%; mix-blend-mode: multiply; }
.cyan { left: 1rem; background: cyan; }
.yellow { left: 6rem; background: yellow; }
  1. Expected result: Cyan and yellow circles overlap to create a green region inside the isolated illustration.
  2. multiply combines channel values and darkens the overlap.
  3. isolation limits backdrop interaction to the intended group.
HTML used by this example

<div class="art" role="img" aria-label="Overlapping cyan and yellow circles"><div class="shape cyan"></div><div class="shape yellow"></div></div>

Best practices

  • Keep important text readable without relying on unpredictable backdrop colors.
  • Use a defined background when a blend result must be predictable.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading