CSS Blend Mode Generator
NewPreview all 16 CSS mix-blend-mode and background-blend-mode values live on two color layers, and copy the exact CSS.
mix-blend-mode blends one element with everything visually behind it (other elements, the background). background-blend-mode blends an element's own background layers (multiple background-images/colors) with each other, without affecting sibling elements.
Frequently Asked Questions
What's the difference between mix-blend-mode and background-blend-mode?
mix-blend-mode blends one element with everything visually stacked behind it, including other elements and the page background. background-blend-mode only blends an element's own background layers (like a background-color and background-image) with each other, without touching sibling elements.
Why does switching to background-blend-mode change what's shown in the preview?
The preview swaps from two separate overlapping elements (for mix-blend-mode) to a single element with a background-color and a background-image blended together (for background-blend-mode), since that's what each property actually operates on.
Do these blend modes work the same as Photoshop's layer blend modes?
Yes — CSS blend modes are modeled directly on the same compositing formulas used in image editing software, so multiply, screen, overlay, and the others behave identically to their Photoshop/GIMP counterparts.
Is there good browser support for CSS blend modes?
Yes, both mix-blend-mode and background-blend-mode have been supported in all major browsers (Chrome, Firefox, Safari, Edge) for years, so they're safe to use in production without fallbacks in most cases.