CSS Blend Modes Simulator
Color
CSS `mix-blend-mode` exposes the same 16 separable and non-separable blend modes that Photoshop popularized — multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, and the four non-separable HSL-style modes (hue, saturation, color, luminosity). This tool implements the exact W3C Compositing & Blending Level 1 algorithms in pure JavaScript and computes the resulting color when a source (foreground) blends onto a backdrop (background). For each mode you see a live visual swatch using actual `mix-blend-mode` CSS and the computed hex value, so you can verify what the browser will produce and copy the snippet directly. The separable modes operate channel-by-channel; the non-separable ones use the W3C `setLum`/`setSat`/`clipColor` helpers to operate in a perceptual lightness/saturation space.
Notes
Implements the W3C Compositing & Blending Level 1 spec. Separable modes (multiply, screen, etc.) work channel-by-channel. Non-separable modes (hue, saturation, color, luminosity) use lum = 0.3R + 0.59G + 0.11B and preserve target lightness/saturation via setLum/setSat/clipColor helpers. Click any tile to copy the matching mix-blend-mode CSS declaration.
How to use
- Pick a backdrop color (the base layer underneath).
- Pick a source color (the foreground that blends on top).
- Browse the grid — every mode shows a live visual preview and the computed hex result.
- Click any tile to copy `mix-blend-mode: <mode>;` to clipboard.
- Try a preset (Red on Blue, Photo Tinting, Sticker on Background, Sunset Gradient) to see a worked example.
Frequently asked questions
- What's the difference between overlay and hard-light?
- 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.
- Why do hue/saturation/color/luminosity look so different from the others?
- 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.
- Does this match what the browser actually renders?
- 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`.
- What about `background-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.
Related tools
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.