Design Atlas
한국어
✦ Visual effects

Blend mode

블렌드 모드

A CSS property that composites two overlapping layers using formulas like multiply, screen, or overlay.

Also known as: mix-blend-modebackground-blend-mode
···
html
<div class="wrap"><div class="stage"><div class="c a"></div><div class="c b" id="b"></div></div><div class="tag" id="tag">multiply</div></div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.stage{position:relative;width:180px;height:110px;background:#eceef2;border-radius:14px;overflow:hidden}
.c{position:absolute;width:90px;height:90px;border-radius:50%}
.a{background:#ff8a3d;left:10px;top:10px}
.b{background:#5b5bf7;left:60px;top:10px;mix-blend-mode:multiply;animation:drift 3s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(10px,8px)}}
.tag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--muted);letter-spacing:.02em}
js
const b = document.getElementById('b');
const tag = document.getElementById('tag');
const modes = ['multiply', 'screen', 'overlay', 'difference', 'color-dodge', 'normal'];
let i = 0;
setInterval(() => { i = (i + 1) % modes.length; b.style.mixBlendMode = modes[i]; tag.textContent = modes[i]; }, 1800);

mix-blend-mode blends an element with everything beneath it; background-blend-mode blends background layers within a single element. multiply darkens (the same formula as Photoshop), screen lightens, and difference produces an almost-inverted, high-contrast result.

Overlap the same two shapes and switch only the mode to see the difference clearly — it's the same math design tools like Figma and Photoshop use.

When to use

Common for duotones, texture overlays, and coloured shadows. Colour-space handling differs subtly by browser, so verify important screens for real.