Preview CSS blend modes
Preview two colors under every CSS mix-blend-mode value side by side, and copy the CSS for the one you like.
A base layer and a top layer, whatever two colors you're trying to combine.
All 16 CSS mix-blend-mode values are previewed side by side with your two colors.
Click a tile to select it and get the mix-blend-mode declaration.
Frequently asked
What does mix-blend-mode actually do?
It changes how an element's content blends with whatever is behind it, similar to layer blend modes in an image editor like Photoshop. multiply darkens, screen lightens, difference inverts based on contrast, and so on.
Why do some blend modes look identical for flat colors?
Blend modes like hue, saturation, color, and luminosity operate on the HSL components of the colors, so their effect can look subtle (or identical to each other) on simple flat-color swatches. They show more variety over photos or gradients.
Is mix-blend-mode well supported in browsers?
Yes, it's supported in all current major browsers. Very old browser versions may ignore it and just show the top layer's color unblended.