What Is CSS mix-blend-mode? How Colors Look When Elements Overlap

TIPS

When designing a website banner, you may want overlapping colored shapes to produce a different color where they meet. CSS mix-blend-mode can create that effect. Instead of simply making a shape translucent, it changes how the element’s colors are combined with the content behind it. Applying it to text, however, can make words hard to read as the background changes. Here is how the property works, with an example and practical checks for real pages.

What does mix-blend-mode do when elements overlap?

CSS (Cascading Style Sheets) defines how a webpage looks. Its mix-blend-mode property controls how an element’s content blends with what is rendered behind it within the relevant stacking context. It can be used on shapes, images, and text. The default value, normal, uses ordinary compositing: an opaque foreground color normally covers the color behind it.

Four values are especially helpful when learning the differences:

multiply: Multiplies overlapping color values, generally producing a darker result. It works well when the intersection of two colored shapes should look deeper.
screen: Generally produces a lighter blend. Two dark colors can look brighter where they overlap.
difference: Uses the absolute difference between foreground and background color components. Its result can change dramatically with the backdrop, making it more suitable for carefully reviewed decoration than for essential text.
normal: Standard compositing without a special blend. Use it as the baseline when comparing effects.

This differs from background-blend-mode, which mixes background images and the background color belonging to the same element. The mix-blend-mode property blends an element with the rendered content behind it. It also differs from opacity: opacity changes an element’s transparency, while a blend mode changes how foreground and backdrop colors are combined.

CSS example: two overlapping circles in a course banner

Imagine a banner promoting an online design course. On its left, a blue #5AA0D0 circle overlaps a coral #F2A570 circle. Applying multiply to both makes the intersection appear darker than either original color in this example. The circles are decorative, so they are grouped separately from the important text and link.

<div class="course-banner">
  <div class="course-art" aria-hidden="true">
    <span class="disc disc--blue"></span>
    <span class="disc disc--coral"></span>
  </div>
  <div class="course-copy">
    <strong>Design course</strong>
    <a class="course-action" href="/courses/">Course details</a>
  </div>
</div>

.course-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background-color: rgb(255 255 255);
}
.course-art {
  position: relative;
  width: 230px;
  height: 150px;
  isolation: isolate;
}
.disc {
  position: absolute;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.disc--blue {
  left: 12px;
  top: 12px;
  background-color: rgb(90 160 208);
}
.disc--coral {
  left: 88px;
  top: 20px;
  background-color: rgb(242 165 112);
}
.course-copy { color: rgb(32 47 65); }
.course-action {
  display: inline-block;
  padding: 10px 16px;
  background-color: rgb(28 72 116);
  color: rgb(255 255 255);
  text-decoration: underline;
}

The banner uses a white #FFFFFF background with dark blue-gray #202F41 text. The course link has a navy #1C4874 background and a white #FFFFFF label. The text-on-white contrast ratio is approximately 13.60:1, and the white-on-navy link contrast ratio is approximately 9.42:1. Both exceed the 4.5:1 minimum for normal-sized text under the Web Content Accessibility Guidelines (WCAG) 2.2. Replace /courses/ with the actual course page address when using the sample.

What to check when colors do not blend or text is hard to read

First, make sure the two circles really overlap and check which element is painted in front. A different stacking order or backdrop can change the result even when the mix-blend-mode value stays the same. In the example, isolation: isolate creates a separate blending group for the decorative artwork. This helps prevent its colors from blending with unrelated content or backgrounds outside that group.

To compare results, start with normal, then try multiply or screen. Applying a blend mode to text or an interactive button itself means its apparent color may change with the backdrop. Restricting the effect to decorative elements and keeping headings, descriptions, and links outside the blending group makes the design easier to control.

On narrow screens, the position of the artwork relative to the text may change, so inspect the overlap and layout on a phone. If a blended color communicates important information, verify its actual rendered contrast against adjacent colors. HueRoll can help you choose the original palette colors and compare a selected color against white or black, but it does not simulate or automatically check the resulting blend. Do not rely on color alone to communicate essential meaning; include words or shapes as well.