CSS Blend Mode Generator
What blend modes do
Blend modes decide how two layers of colour combine, the same way they do in a graphics editor. CSS has two: background-blend-mode blends an element's own background layers together, and mix-blend-mode blends the whole element into whatever is painted behind it.
Syntax
mix-blend-mode: <mode>; background-blend-mode: <mode>;| Part | What it controls |
|---|---|
| multiply | Darkens. White becomes transparent, which is how you drop a logo on a light photo without a cutout. |
| screen | The inverse. Black becomes transparent, which suits glows, light leaks and fire or smoke overlays. |
| overlay / soft-light / hard-light | Contrast modes. They darken the dark areas and lighten the light ones, which is how a colour wash keeps the image's detail. |
| difference / exclusion | Invert where the layers differ. difference over a photo is the usual way to make text legible on an unpredictable background. |
| hue / saturation / color / luminosity | Split the layers into colour and brightness. color over a greyscale image is a one-line duotone. |
| isolation: isolate | Creates a new stacking context so mix-blend-mode stops at that ancestor instead of blending through the whole page. |
Notes from practice
mix-blend-mode blends with everything behind it
That includes ancestors' backgrounds, not just the element you had in mind. isolation: isolate on the nearest wrapper contains it.
difference is the trick for unknown backgrounds
Text with mix-blend-mode: difference stays legible over a photo, a gradient or a video, because it inverts against whatever is underneath instead of assuming a colour.
Blending happens in sRGB by default
Results can look muddier than the same blend in a design tool. background-blend-mode has no colour-space control, so check the result rather than trusting the name of the mode.
CSS Blend Mode Generator FAQ
What is the difference between mix-blend-mode and background-blend-mode?
background-blend-mode blends an element's own background layers with each other, staying inside that element. mix-blend-mode blends the entire element, content included, with whatever is painted behind it on the page.
How do I create a duotone image effect in CSS?
Put the image in a container with a solid colour background, apply filter: grayscale(100%) to the image, and set mix-blend-mode: luminosity or color on it. The grey values then take their hue from the colour behind.
How do I make text readable over any background image?
mix-blend-mode: difference inverts the text against whatever is underneath, so it stays legible over light and dark areas alike. It is the most reliable option when you do not control the image.
Why is my blend mode affecting the whole page?
mix-blend-mode blends with every layer behind the element, including ancestor backgrounds. Add isolation: isolate to the nearest wrapper to create a stacking context, and the blending stops there.
Which blend mode makes white transparent?
multiply. White pixels leave the layer beneath untouched while darker pixels darken it, which is why multiply is the standard choice for placing dark artwork or a logo on a light photo.
Related generators
- Filter — Combine blur, colour adjustments and drop-shadow on any element. Defaults are left out of the output.
- Gradients — Linear, radial and conic gradients, repeating patterns and modern colour-space interpolation.
- CSS Mask — Fade, spotlight or pattern an element away with gradient masks. Opaque pixels show, transparent pixels hide.
- CSS Patterns — Tile dots, grids, stripes, checkers and zigzags from gradients alone, with no image files.
Part of CSSGen.dev — 30 free visual CSS generators with browser support built in.