CSS Blend Mode Previewer
Preview CSS blend modes against layered colors and text.
See blend modes in action
mix-blend-mode and background-blend-mode change how layers combine — multiply, screen, overlay, and more — but their effect is impossible to predict without seeing it. This previewer applies each mode to layered colors and text so you can compare them side by side.
Blend modes are powerful for duotones, text-over-image effects, and rich overlays, but choosing the right one is entirely visual. Preview the options against your colors, then copy the blend-mode value that gives the effect you want.
See before you ship
Blend modes depend entirely on the layers beneath, so previewing multiply, screen, and overlay live saves guesswork. The preview runs in your browser.
Frequently asked questions
Which blend modes can I preview?
multiply, screen, overlay, darken, lighten, difference, and color-burn, shown on white text over a blue-to-orange gradient.
What is the difference between mix-blend-mode and background-blend-mode?
The tool outputs mix-blend-mode, which blends an element with whatever is behind it. background-blend-mode blends an element's own background layers (an image and a color, say) and accepts the same mode names.
Why does a blend mode affect more than I expected?
The element blends with everything beneath it in the same stacking context. Add isolation: isolate to the parent to limit blending to that container.
Related tools
Practical utilities for front-end design and implementation work.