BYTETOOLS

CSS Blend Mode Generator

Preview every CSS mix-blend-mode and background-blend-mode over two gradient layers. Pick a mode from the dropdown and copy the blend-mode CSS instantly.

overlay

Blend mode

mix-blend-mode CSS

.top-layer {
  mix-blend-mode: overlay;
}

background-blend-mode CSS

.blended {
  background-image: linear-gradient(45deg, #ef4444, #f59e0b), radial-gradient(circle at 30% 30%, #06b6d4, #6d28d9);
  background-blend-mode: overlay;
}

What is the CSS Blend Mode Generator?

The CSS Blend Mode Generator lets you preview how each blend mode combines layers. Choose from all sixteen modes — multiply, screen, overlay, difference, hue and more — applied over two overlapping gradient layers, and see the composited result update instantly.

  • All 16 CSS blend modes
  • Preview over two gradient layers
  • Both mix-blend-mode and background-blend-mode output
  • Instant live compositing
  • Copy-ready blend CSS
  • Fully client-side, no image upload

How to use the CSS Blend Mode Generator

  1. 1

    Pick a blend mode from the dropdown.

  2. 2

    Compare mix-blend-mode and background-blend-mode outputs.

  3. 3

    Watch the two gradient layers composite live.

  4. 4

    Copy the generated blend-mode CSS into your project.

About the CSS Blend Mode Generator

The CSS Blend Mode Generator lets you preview how each blend mode combines layers. Choose from all sixteen modes — multiply, screen, overlay, difference, hue and more — applied over two overlapping gradient layers, and see the composited result update instantly.

Blend modes power duotones, photo tints, texture overlays and creative text effects. Rather than memorizing what each mode does, you flip through the dropdown, watch the preview, and copy the CSS for the look you want.

The gradients are rendered with pure CSS in your browser, so nothing is uploaded and the tool works offline.

Frequently asked questions

What is the difference between mix-blend-mode and background-blend-mode?

mix-blend-mode blends an element with whatever is behind it in the page, while background-blend-mode blends an element's own multiple backgrounds (images and gradients) with each other. This tool shows CSS for both.

What does the multiply blend mode do?

multiply multiplies the color channels of the two layers, always producing a darker result. White becomes transparent and black stays black, which makes multiply ideal for tinting photos and removing white backgrounds.

How do I create a duotone effect with blend modes?

Place a solid or gradient color layer over a grayscale image and set a blend mode like multiply, screen or color. Adjusting the color and mode produces classic two-tone duotone treatments entirely in CSS.

Do CSS blend modes work in all browsers?

mix-blend-mode and background-blend-mode are supported in all modern browsers. Some modes can behave differently against transparent backgrounds, so it is worth testing your specific layering.

Why is my mix-blend-mode not visible?

mix-blend-mode needs something behind the element to blend with, and an isolated stacking context (isolation: isolate) can block it. Make sure the element overlaps a backdrop and is not isolated from it.

Guides for CSS Blend Mode Generator

Related tools