CSS background-blend-mode Property

Definition and Usage

The background-blend-mode property mixes an element's background images with each other and with its background-color. The first image in background-image is the top layer. The color sits at the bottom and does not take a blend mode of its own.

You need at least two layers, or every keyword looks the same. A gradient such as linear-gradient() counts as an image. The blend stays inside this element. To mix the whole element with the page behind it, use mix-blend-mode.

CSS Syntax

One keyword applies to every image. A comma-separated list follows background-image order: the first mode blends the top image. A shorter list repeats. Extra modes are dropped.

Property Values

Each editor below uses the same two layers: blue underneath, a yellow-to-red gradient on top. Compare the keyword, not the layers.

How to Use background-blend-mode

Stack two layers on one element, then name how the top layer mixes with what is under it.

1. Set a background-color and a background-image, or two images. A gradient counts as an image.
2. Write the blend modes in that same image order. The first keyword blends the top image.
3. Leave the color as the bottom layer. It never gets a keyword of its own.
4. Set the property on that element. It is not inherited, and a transition will not fade from one mode to another.

Live Preview

Blue underneath, yellow fading to red on top. Change background-blend-mode and watch those two layers mix.

CSS Examples

Each snippet sets only the layers and the blend mode. Height is there so the box is visible. Use Try It Yourself for a live editor.

<style>
  div {
    height: 140px;
    background-color: #2563eb;
    background-image: linear-gradient(#facc15, #ef4444);
    background-blend-mode: multiply;
  }
</style>

<div></div>

<style>
  div {
    height: 140px;
    background-color: #2563eb;
    background-image: linear-gradient(#facc15, #ef4444);
    background-blend-mode: screen;
  }
</style>

<div></div>

<style>
  div {
    height: 140px;
    background-color: #0f172a;
    background-image:
      linear-gradient(#facc15, transparent),
      linear-gradient(#38bdf8, #2563eb);
    background-blend-mode: multiply, screen;
  }
</style>

<div></div>

Key Takeaways