CSS mix-blend-mode Previewer
See all sixteen CSS blend modes applied live between two colors or layers. Instead of guessing what difference or exclusion does, click through and watch the composite change.
Using the CSS Blend Mode Previewer: step by step
- Choose the top and background colors of the two layers.
- Select a blend mode from the full list of sixteen.
- Observe the composited result in the preview panel.
- Copy the mix-blend-mode value into your CSS.
What people use the CSS Blend Mode Previewer for
- Choosing how overlay text should interact with a photo background.
- Building duotone and tinting effects with multiply or screen.
- Comparing similar modes like soft-light versus overlay before committing.
- Understanding how blend modes compute color mathematically.
Inside the CSS Blend Mode Previewer
mix-blend-mode composites an element with whatever renders beneath it, and each mode is a different formula for combining source and backdrop pixels: multiply darkens, screen lightens, overlay combines both by luminance, and modes like difference invert relative to the backdrop. The previewer lets you experiment with any pair of colors so the choice is informed rather than trial-and-error in your codebase.
Limitations worth knowing
Blend modes interact with stacking context; adding certain properties or parent isolation changes results, so test in the real layout.
CSS Blend Mode Previewer FAQ
What is the difference between blend and background blend?
mix-blend-mode blends an element with its backdrop; background-blend-mode blends an element's own background layers.
Why does white or black make some modes do nothing?
Modes like screen and multiply have identity values; pure white or black leaves certain results unchanged.
Are blend modes well supported?
Yes, all modern browsers support the full set of sixteen modes.
Last reviewed: October 2026.