CSS background-blend-mode Property

The background-blend-mode CSS property defines how an element's background images blend with each other and with the element's background-color. It lets you combine layered backgrounds the way image editors blend layers — tinting a photo, building a duotone effect, or fading one texture into another — without touching the image files themselves.

This page covers what each blend mode does, how blending works when an element has several background layers, real use cases, and runnable examples. The default value is normal, which means no blending.

Property reference


Initial Value	`normal`
Applies to	All elements. Also applies to ::first-letter and ::first-line.
Inherited	No
Animatable	No
Version	CSS3
DOM Syntax	`object.style.backgroundBlendMode = "luminosity"`

Syntax

background-blend-mode: <blend-mode>;

/* Multiple layers */
background-blend-mode: <blend-mode>, <blend-mode>, ...;

Where <blend-mode> is one of:

normal | multiply | screen | overlay | darken | lighten |
color-dodge | color-burn | hard-light | soft-light |
difference | exclusion | hue | saturation | color | luminosity

How layered blending works

An element can stack multiple background layers: the background-image list, plus the background-color painted underneath all of them. background-blend-mode accepts a comma-separated list of modes that correspond, in order, to the background-image layers:

If you give fewer modes than layers, the list repeats from the start until every layer has a mode.
If you give more modes than layers, the extra modes are ignored.
The background-color is always the bottommost layer and blends with the image layer directly above it.

/* Two images: the first uses "screen", the second "multiply" */
background-image: url(top.png), url(bottom.png);
background-blend-mode: screen, multiply;

Blending happens only between the backgrounds of the same element — it does not blend with content visually behind the element in the stacking context. To blend an element with what is underneath it on the page, use mix-blend-mode instead.

Values

Value	What it does
`normal`	No blending — the top layer paints over layers below it (default).
`multiply`	Multiplies color channel values. Result is always darker; white is transparent, black stays black.
`screen`	Inverse of `multiply`. Result is always lighter; black is transparent, white stays white.
`overlay`	Applies `multiply` where the bottom layer is dark and `screen` where it is light — boosts contrast.
`darken`	Keeps whichever pixel is darker, channel by channel.
`lighten`	Keeps whichever pixel is lighter, channel by channel.
`color-dodge`	Brightens the bottom layer to reflect the top layer, producing vivid highlights.
`color-burn`	Darkens the bottom layer to reflect the top layer, intensifying shadows.
`hard-light`	Like `overlay` but with the roles of top and bottom swapped — a strong contrast boost.
`soft-light`	A gentler version of `overlay`; preserves mid-tones, avoids harsh edges.
`difference`	Subtracts the darker color from the lighter one per channel. Identical colors produce black.
`exclusion`	Similar to `difference` but lower contrast; mid-tones become gray.
`hue`	Takes the hue of the top layer, with the saturation and lightness of the bottom layer.
`saturation`	Takes the saturation of the top layer, with the hue and lightness of the bottom layer.
`color`	Takes the hue and saturation of the top layer with the lightness of the bottom layer — the standard way to tint a grayscale photo.
`luminosity`	Inverse of `color`: takes the lightness of the top layer with the hue and saturation of the bottom layer.

Understanding the blend mode families

The 16 modes fall into four families:

Darkening modes (multiply, darken, color-burn) — the result is never brighter than either source. Useful for drop-shadows, deepening shadows, and adding dark tints.

Lightening modes (screen, lighten, color-dodge) — the result is never darker than either source. Useful for glows, light leaks, and brightening effects.

Contrast modes (overlay, hard-light, soft-light) — darken dark areas while lightening light areas, boosting overall contrast. Soft-light is the most subtle; hard-light is the most aggressive.

Difference/exclusion modes (difference, exclusion) — produce inverted or psychedelic results. Mostly used for creative effects or animation; less common in UI work.

Component modes (hue, saturation, color, luminosity) — split a color into its HSL components and swap individual channels between layers. These are the workhorses for photo recoloring.

Examples

normal

No blending — the front image is drawn on top of the back image with no interaction between them.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: normal;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Try it Yourself »

screen

Light areas stay bright; dark areas on the top image become transparent, revealing the layer below. Good for adding glows or soft light leaks.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: screen;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Try it Yourself »

color-dodge

Brightens the bottom layer to reflect the top layer. Produces vivid, high-key results. Useful for neon or flare effects.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: color-dodge;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Try it Yourself »

multiply

Multiplies color channel values, always producing a result darker than either source. White areas become transparent; black areas stay black. The classic choice for adding tints or shadows to a photo.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: multiply;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Try it Yourself »

overlay

Boosts contrast by applying multiply where the bottom layer is dark and screen where it is light. Keeps the bottom layer's tonal character while making it pop.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: overlay;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Try it Yourself »

darken

Compares each color channel and keeps the darker value. The two layers compete pixel by pixel, and the darkest parts of either layer always win.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: darken;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Try it Yourself »

saturation

Takes the saturation of the top layer while preserving the hue and lightness of the bottom layer. Useful for desaturating or re-saturating parts of a photo while keeping the color palette.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 400px;
        height: 400px;
        background-repeat: no-repeat, repeat;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png"), url("/uploads/media/default/0001/02/9ced3f2aae55e225cc0737bdb533a274bd004420.png");
        background-blend-mode: saturation;
        background-size: 280px;
        background-position: center;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Try it Yourself »

Common use cases

Tinting a photo with a brand color

Layer a solid background-color over a photo and use multiply to push the image toward that hue. Dark areas in the photo absorb the tint most strongly.

.hero {
  background-image: url(photo.jpg);
  background-color: #4f46e5; /* indigo brand color */
  background-blend-mode: multiply;
}

Creating a duotone effect

Set two gradient backgrounds — one for highlights, one for shadows — over a grayscale image using screen and multiply:

.duotone {
  background-image:
    linear-gradient(#ff6b6b, #ff6b6b),  /* highlight color */
    linear-gradient(#4f46e5, #4f46e5),  /* shadow color */
    url(photo.jpg);
  background-blend-mode: screen, multiply, normal;
}

The grayscale photo receives both a warm highlight layer (screen) and a cool shadow layer (multiply), producing the classic two-tone look popular in hero sections.

Texture overlay

Fade a noise or paper texture into a flat background color without editing the asset:

.textured-card {
  background-image: url(noise.png);
  background-color: #f5f0eb;
  background-blend-mode: soft-light;
}

soft-light is usually the gentlest choice here — it adds texture without washing out the base color.

Interactive recolor on hover

Change the blend mode dynamically to create a CSS-only hover effect:

.card {
  background-image: url(photo.jpg);
  background-color: #10b981;
  background-blend-mode: normal;
  transition: background-blend-mode 0s; /* instant switch */
}

.card:hover {
  background-blend-mode: multiply;
}

Note: background-blend-mode is not animatable (no intermediate states), so transitions snap rather than interpolate.

When blending the whole element is needed

background-blend-mode only blends layers within the element's own background. If you need to blend an element with the content behind it on the page — for example, a frosted-glass overlay — use mix-blend-mode instead.

For single-image adjustments (brightness, contrast, grayscale) where you do not need a second layer, the filter property is often a simpler solution, and opacity is the right tool for fading the whole element.

Browser support

background-blend-mode is supported in all modern browsers (Chrome, Firefox, Edge, Safari, and Opera). Internet Explorer never supported it. Provide a sensible plain background fallback for legacy environments — unblended backgrounds render the layers stacked normally with no visible error.

/* Fallback first, then enhanced */
.hero {
  background: url(photo.jpg) center / cover #4f46e5;
}

@supports (background-blend-mode: multiply) {
  .hero {
    background-blend-mode: multiply;
  }
}

Practice

What does the CSS background-blend-mode property do?

It defines the mixing mode of the background image and background color.It adjusts the size of the background image.It controls the scrolling of the background image.It allows multiple background images to blend into each other.It determines the position of the background image.