Blend mode

A blend mode is the math used to combine a layer's pixels with whatever is underneath, instead of just covering it. The families are worth memorizing: multiply darkens, and white is its neutral value, so white areas of the top layer leave the backdrop looking untouched (ink on paper, texture overlays). screen lightens, with black as the neutral value that leaves the backdrop alone (light leaks, lens flares, glow). Neither one is deleting anything: the alpha stays exactly where it was, the math just happens to return the layer underneath. overlay and soft-light push contrast while keeping the base image readable, difference inverts and is the party trick behind text that flips color over any background.

On the web there are two properties. 'mix-blend-mode' blends an element with its siblings and page behind it; 'background-blend-mode' blends an element's own background layers together. Classic uses: multiplying a paper or grunge scan over flat artwork, screening grain over a photo, duotone with a color layer, and 'mix-blend-mode: difference' on a cursor or headline so it stays legible over anything.

Gotcha: blending only sees the current stacking context. The moment an ancestor gets 'opacity' below 1, a transform, a filter, or 'isolation: isolate', your layer stops blending with the page and blends with that ancestor instead, which usually shows up as the effect mysteriously vanishing. Also, multiply over a dark theme mostly produces mud, so swap to screen when you invert the palette.