CSS Blend Modes Simulator

Overlay decides which formula to apply based on the BACKDROP brightness — dark backdrop → multiply, light backdrop → screen. Hard-light decides based on the SOURCE brightness — dark source → multiply, light source → screen. So overlay(A, B) == hard-light(B, A). If you want 'punch up the contrast based on what's underneath,' use overlay; if you want 'punch through based on what you're painting,' use hard-light.

Those four are 'non-separable' modes — they can't be computed channel-by-channel. The W3C spec defines them via three helpers: lum(rgb) = 0.3R + 0.59G + 0.11B (luminance), sat(rgb) = max − min, and setLum/setSat that preserve a target value while clipping. 'Color' for example takes the hue+saturation from the source and the luminance from the backdrop. That's why colorizing a black-and-white photo with a tinted layer uses mode: color.

Yes — the visual preview uses real CSS mix-blend-mode so the browser does the actual compositing. The displayed hex value is computed in JavaScript using the same W3C formulas the browser implements, so the two should agree to within rounding (±1 per channel). If you see a discrepancy, it's likely because the browser blends in linear-light sRGB while this tool uses gamma-encoded sRGB; the W3C spec actually allows both, and most browsers do gamma-encoded for mix-blend-mode.

Same formulas, different application: mix-blend-mode blends an element against what's behind it; background-blend-mode blends an element's multiple background layers against each other. The output computed here applies to both — just paste the mode name into whichever property you're using.