Two Blend Mode Properties
CSS provides two blend mode properties: mix-blend-mode controls how an element blends with the content BELOW it (compositing with the stacking context). background-blend-mode controls how background LAYERS within a single element blend with each other. For blending patterns with page content, use mix-blend-mode on an absolutely positioned pattern overlay.
The Blend Mode Values
CSS supports 16 blend modes. The most useful for patterns: Multiply: darkens (white in the source = transparent). Screen: lightens (black = transparent). Overlay: high contrast — darkens darks, lightens lights. Soft Light: subtle Overlay variant. Color: applies pattern hue/saturation to background luminosity. Luminosity: opposite of Color. Difference: creates surreal inversion effects.
Multiply: The Pattern Overlay Technique
mix-blend-mode: multiply is the designer's favourite for pattern overlays. A dark pattern element on a white background becomes fully opaque; on a coloured background it tints. A light pattern element approaches transparency. This means a black geometric pattern at multiply blend mode looks correct on any background colour — no need to choose pattern colours per-page.
.pattern-overlay {
position: absolute;
inset: 0;
background-image: url('data:image/svg+xml;base64,...');
mix-blend-mode: multiply;
opacity: 0.4;
pointer-events: none;
}Screen: Glowing Patterns on Dark Backgrounds
mix-blend-mode: screen is Multiply's inverse — black elements become transparent, white elements become fully opaque. Use a white geometric pattern with screen blend mode over a dark background for a glowing light-trace effect. Combine with a subtle coloured background to tint the "glow" colour.
isolation: isolate
By default, mix-blend-mode blends with everything in the stacking context — including elements behind the pattern container. Use isolation: isolate on a parent container to create a new stacking context, confining blend mode effects to siblings within that container. This prevents patterns from accidentally blending with the page background or other unrelated elements.
Background-Blend-Mode for In-Element Layering
background-blend-mode is simpler — it blends background layers within one element. Stack a gradient over an SVG pattern: the gradient layer can use multiply to add a colour wash, or overlay to add contrast and depth. This technique requires no extra DOM elements.
Performance of Blend Modes
Blend modes trigger GPU compositing. When applied to elements that scroll or animate, they create new composite layers — which can increase GPU memory usage significantly. Limit blend modes to non-scrolling elements where possible. Never apply mix-blend-mode inside overflow: scroll containers on mobile — the compositing cost causes frame drops.