Blend like Photoshop. Remove white backgrounds. Make text always readable.
Click any blend mode to apply it. Choose whether to blend the overlay box or the text with the background. Watch the visual change instantly.
These are the real-world use cases — the ones worth understanding thoroughly.
White on the logo becomes transparent because white × anything = anything. No Photoshop, no transparent PNG needed.
Black becomes transparent with screen — so the black background disappears, leaving the white text to let the gradient show through it.
overlay multiplies against dark backgrounds and screens against light ones — the text automatically maintains visibility as the background changes.
White text with difference becomes the complementary color of whatever is behind it — guaranteed to always contrast.
isolation: isolate creates a new stacking context — blend modes inside only blend with each other, not with parent layers.
A white circle with difference inverts whatever is under it as you move. Popular creative effect with no JavaScript logic for the inversion.
background-blend-mode blends multiple background layers on the same element — the image and color blend inside the element itself.
Stack the photo with a gradient, blend with luminosity — the photo's tones map to the gradient's colors. Two-color image effect, no image editing.
Blend a solid color layer with multiply — the image takes the color's tint. Change only the gradient color to switch the tint. Works great for themed galleries.
Blend modes can be animated with @keyframes — but they snap between values (no interpolation). Only normal smoothly transitions via transition (it fades in/out).
body has no background. Fix: body { background: #fff; } or any color.isolation: isolate on the parent to contain blending.