CSS Blend Modes Reference

How colours combine when they overlap

CSS blend modes control the maths used when one layer is composited over another — the same Multiply, Screen and Overlay modes you know from image editors. They power mix-blend-mode (blend an element with the page behind it) and background-blend-mode (blend a box’s own background layers). This reference lists every value with its real W3C compositing formula and effect, plus a calculator that applies the formula to a single colour channel.

How it works

Separable modes work per channel on values normalised to the 0–1 range. A few core formulas, using Cb for backdrop and Cs for source:

multiply:    B = Cb × Cs
screen:      B = Cb + Cs − Cb × Cs
overlay:     B = hard-light(Cs, Cb)
difference:  B = |Cb − Cs|
exclusion:   B = Cb + Cs − 2 × Cb × Cs

The calculator takes 0–255 inputs, normalises to 0–1, applies the exact formula (including the piecewise soft-light and hard-light definitions and the divide-by-zero guards in color-burn/color-dodge), then scales back to 0–255. The four non-separable modes — hue, saturation, color, luminosity — recombine HSL components of the whole colour and so cannot be reduced to a single channel; the tool flags those rather than returning a wrong number.

Mode directory — when to reach for each

Darkening modes — the result is always darker than both inputs:

• multiply — the classic. Neutral is white (1 × anything = anything). Useful for adding shadow-like textures over light backgrounds, or overlaying a dark graphic that should knock out its own white areas.
• color-burn — darkens more aggressively and increases contrast. Use for high-drama lighting effects; it clips very dark inputs to black.
• darken — takes the minimum of each channel. Sharp-edged, not gradual. Good for keeping the darkest value when two similarly-coloured layers overlap.

Lightening modes — the result is always lighter than both inputs:

• screen — the complement of multiply. Neutral is black. Useful for adding glow effects, light leaks, or overlaying white-on-black graphics (like sparkles) so they add light without killing colour.
• color-dodge — brightens and reduces contrast toward the source. Can create a vivid, high-key look.
• lighten — takes the maximum of each channel. The light analogue of darken.

Contrast modes — darken dark areas and lighten light areas:

• overlay — uses the backdrop value to decide: dark areas multiply, light areas screen. Adds pop and texture without dramatically shifting mid-tones.
• hard-light — the same formula as overlay but driven by the source. Swap your source and backdrop to convert between the two.
• soft-light — a gentler version of overlay. Excellent for adding subtle texture to a photograph without over-processing it.

Inversion modes:

• difference — subtracts and takes the absolute value. Two identical layers produce black. Use for artistic inversion effects; white inverts fully, black leaves unchanged.
• exclusion — a softer difference, never quite reaching pure black.

Non-separable (HSL) modes — operate on hue, saturation, and luminosity together:

• hue — takes the hue of the source, keeps the saturation and luminosity of the backdrop.
• saturation — takes the saturation of the source. Paint with a grey to desaturate; paint with a vivid colour to saturate.
• color — takes hue and saturation from the source, luminosity from the backdrop. The classic technique for colourising a black-and-white photo.
• luminosity — takes brightness from the source, colour from the backdrop. The inverse of color.

Tips and notes

• multiply always darkens, screen always lightens — white and black are their neutrals.
• overlay/hard-light are the same formula with operands swapped.
• Non-separable modes (hue, saturation, color, luminosity) work in HSL, not per channel.
• mix-blend-mode on a non-isolate parent can blend with siblings — wrap in isolation: isolate to scope it.