Master CSS Blend Modes: From Basics to Stunning Visual Effects

Blend‑mode values

The <blend-mode> type defines how overlapping colors are combined. All modern browsers support sixteen keywords:

normal – the top layer simply covers the bottom layer.

multiply – multiplies the top and bottom colors, darkening the result; black yields black, white leaves the other color unchanged.

screen – the opposite of multiply; lighter colors become brighter, black leaves the other color unchanged.

overlay – combines multiply and screen depending on the base color brightness.

darken – selects the darker RGB channel values from the two layers.

lighten – selects the lighter RGB channel values.

color-dodge – brightens the background to reflect the foreground, similar to screen.

color-burn – darkens the background, similar to multiply.

hard-light – like overlay but swaps the roles of the layers.

soft-light – a softer version of overlay.

difference – subtracts the darker color from the lighter one.

exclusion – similar to difference with lower contrast.

hue – uses the hue of the top layer with the saturation and lightness of the bottom.

saturation – uses the saturation of the top layer with the hue and lightness of the bottom.

color – combines hue and saturation of the top layer with the lightness of the bottom.

luminosity – combines lightness of the top layer with the hue and saturation of the bottom.

Grouping the modes

For quicker selection the modes can be grouped into five functional categories:

Darkening : multiply, darken, color‑burn

Lightening : screen, lighten, color‑dodge

Contrast adjustment : overlay, hard‑light, soft‑light

Difference : difference, exclusion

Color composition : hue, saturation, color, luminosity

Using background-blend-mode

A single‑layer example that blends a cloudy image with a solid sky color using multiply:

.blended {
  background: url(http://p9.qhimg.com/t012932e87662183569.jpg);
  background-color: #09a8e0;
  background-blend-mode: multiply;
}

When multiple background layers are defined, the background-blend-mode list must contain the same number of values as there are layers. If the list is shorter, it repeats; if longer, excess values are ignored.

Example with five layers and five corresponding blend modes:

background: url(http://p6.qhimg.com/t0110da9f699fc645b4.png),
            url(http://p0.qhimg.com/t01628bd068d6f37961.png),
            url(http://p2.qhimg.com/t0160c558d31f4d5202.png),
            url(http://p9.qhimg.com/t012932e87662183569.jpg),
            linear-gradient(#0aa0fe 0%, #baf5ff 55%, #85c1cb 55%);
background-blend-mode: lighten, lighten, lighten, multiply, darken;

This creates a sky‑blue gradient with layered clouds and a subtle darkening of the base image.

Using mix-blend-mode

mix-blend-mode

determines how an element’s content blends with its parent’s background. The following markup demonstrates three cloud elements blended over a gradient background:

<div class="wrapper">
  <div class="img"></div>
  <div class="cloud cloud1"></div>
  <div class="cloud cloud2"></div>
  <div class="cloud cloud3"></div>
</div>

.wrapper {
  position: relative;
  width: 300px;
  height: 200px;
  background: linear-gradient(#0aa0fe 0%, #baf5ff 55%, #85c1cb 55%);
  overflow: hidden;
}

.img {
  width: 100%;
  height: 100%;
  background: url(http://p9.qhimg.com/t012932e87662183569.jpg);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

.cloud {
  position: absolute;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: lighten;
}

.cloud1 { background-image: url(http://p6.qhimg.com/t0110da9f699fc645b4.png); left:30px; top:50px; width:60px; height:20px; }
.cloud2 { background-image: url(http://p0.qhimg.com/t01628bd068d6f37961.png); left:230px; top:50px; width:80px; height:30px; }
.cloud3 { background-image: url(http://p2.qhimg.com/t0160c558d31f4d5202.png); left:130px; top:25px; width:100px; height:30px; }

Each cloud element blends with the gradient background according to its mix-blend-mode value, producing a soft, natural composition.

Practical notes

When using background-blend-mode with multiple backgrounds, the order of blend‑mode values follows the order of the background images.

If the number of blend‑mode values is fewer than the number of background layers, the list repeats cyclically; if more, the extra values are ignored.

Both properties are supported in modern browsers and can be combined with CSS gradients, images, and solid colors to achieve Photoshop‑like compositing without external tools.