How to use the Layer Blend Mode Previewer
- Set up the blend layer (top). Choose Color, Gradient or Image. Colors take HEX,
rgb()orhsl(); images can be dropped, chosen or pasted. Files are read by your browser and never leave your device. - Set up the base layer (bottom) the same way. ⇅ Swap layers flips them, which matters more than you’d think — Overlay and Hard Light are the same formula with the layers swapped.
- Pick a mode. Use the Blend mode menu, or click any tile under Every mode on these layers. The chips above the grid narrow it to one family: Darken, Lighten, Contrast, Inversion or Component.
- Dial in the opacity. The Top layer opacity slider behaves like the Opacity field in Photoshop, Procreate and Krita. Under the preview you get the formula, what the mode is good for and its name in each app.
- Save it. Download PNG exports the result at up to 2400 px on the long side (1600 px for colors and the built-in gradients). Copy CSS gives you the
mix-blend-modeline for the 17 modes that browsers support.
What a blend mode actually calculates
Every pixel has a red, green and blue value. Blend modes treat each one as a number from 0 (none) to 1 (full) and combine the base with the blend layer. Multiply literally multiplies: a 50% gray (0.5) multiplied by itself gives 0.25, which is why stacking two Multiply shading layers darkens faster than you expect. Screen is Multiply turned inside out: it inverts both layers, multiplies, and inverts the result, so it can only lighten.
Each mode also has a neutral color that leaves the base untouched. White vanishes in Multiply, Darken, Color Burn and Linear Burn. Black vanishes in Screen, Lighten, Color Dodge, Add and Difference. In Overlay, Soft Light, Hard Light, Vivid Light, Linear Light and Pin Light, 50% gray (#808080) is neutral — paint a texture in grays around it and only the variations show.
The Contrast family splits on 50% gray. Overlay looks at the base to decide whether to multiply or screen, so it exaggerates the contrast already in your painting. Hard Light makes the same decision from the blend layer, so the top layer’s own lights and darks win. The Component modes (Hue, Saturation, Color, Luminosity) work differently: they convert to a brightness measure, 0.3 R + 0.59 G + 0.11 B, and swap whole properties instead of mixing channels.
All of this runs on gamma-encoded sRGB values, as Photoshop does by default and as browsers do for CSS. Results for 8-bit RGB files match what those apps show to within rounding. Photoshop’s optional “Blend RGB Colors Using Gamma 1.00” setting, and linear-light workflows in 3D and compositing apps, give visibly different results.
One skin tone, one blue, eleven results
Base #D9A07B, a warm skin tone. Blend #7F9CC8, a soft blue. Every value below is what this previewer outputs at 100% opacity unless noted.
| Mode | Result | What happened |
|---|---|---|
| Multiply | #6C6260 |
Heavy, gray shadow — too much at full strength |
| Multiply at 50% | #A3816E |
A usable cool shadow |
| Screen | #ECDAE3 |
Pale, misty highlight |
| Overlay | #D9B5C1 |
Red kept, green and blue lifted |
| Soft Light | #D9A99A |
The same idea, much gentler |
| Color Burn | #B36457 |
Saturated, reddish shadow |
| Linear Burn | #593D44 |
Darker and duller than Multiply |
| Color Dodge | #FFFFFF |
Clipped to white in every channel |
| Difference | #5A044D |
Near-complementary purple |
| Color | #94B1DD |
Blue hue at the skin’s brightness |
| Luminosity | #C48B66 |
Skin hue at the blue’s brightness |
Notice that Color keeps the skin tone’s brightness but takes the blue entirely. That is the whole trick behind painting in grayscale first and adding color on a Color layer later.
Names that change between apps
Most names match, with a few traps. Procreate calls Linear Dodge Add. Krita calls Color Burn Burn, offers Linear Dodge under that name and as Addition, and splits Soft Light into Soft Light (Photoshop) and Soft Light (SVG). The SVG version is the W3C formula used here and in CSS. The two only disagree where the blend is lighter than 50% gray and the base is darker than about 25%; the worst case is a near-black base under white, which comes out 19 in one and 36 in the other on a 0–255 scale.
Browsers support 16 of these modes in CSS mix-blend-mode, plus plus-lighter for additive light. Linear Burn, Vivid Light, Linear Light, Pin Light, Hard Mix, Subtract, Divide, Darker Color and Lighter Color have no CSS value.
Tips from practice
Shade with color, not black. A Multiply layer in near-black turns skin gray and gardens muddy. Pick a cool, mid-value color — blue-violet for daylight, warm brown for candlelight — and lower the opacity until it sits. The table above shows the gap between 100% and 50%.
Push glows from the dark side. Color Dodge and Add clip to white quickly. Paint glows with a darker, saturated version of the light color at 20–40% opacity and build up; you keep the hue instead of a white blob.
Learn Photoshop’s “special eight”. In Photoshop, Fill and Opacity behave differently for Color Burn, Linear Burn, Color Dodge, Linear Dodge (Add), Vivid Light, Linear Light, Hard Mix and Difference. Lowering Fill on those layers gives softer, less clipped results than lowering Opacity. The slider here matches Opacity.
Test textures over 50% gray. Before laying a paper or grain texture over a painting, blend it over flat #808080 in Overlay or Soft Light. Any shift in overall brightness means the texture isn’t centered on neutral. The Texture & Noise Generator has a brightness control for exactly this.
Use Difference to compare versions. Put an old and a new export on top of each other in Difference: everything identical goes black, so a nudged line or a changed color jumps out. It is also a quick way to check that a flipped or resized sketch still lines up.