How to blend elements in CSS?


Blending elements in CSS is a technique used to create interesting visual effects and enhance the design of a web page. With the mix-blend-mode property in CSS, you can control how an element blends with the content below it. In this article, we'll explore how to use mix-blend mode to blend elements in CSS.

Understanding Mix-Blend-Mode

mix-blend-mode is a CSS property that allows you to set the blending mode for an element. Blending modes determine how two elements blend together, with different modes producing different visual effects.

By default, an element in CSS will have a blending mode of normal, which means that it will display normally on top of other content. But with mix-blend mode, you can set a different blending mode for an element, and it will blend with the content beneath it in a specific way.

There are a variety of blending modes available, each producing a unique effect. Here's an overview of some of the most commonly used blending modes −

  • Normal − The default blending mode, which displays the element normally on top of other content

  • Multiply − Darkens the content beneath the element

  • Screen − Lightens the content beneath the element

  • Overlay − Produces a combination of multiply and screen effects

  • Color-dodge − Brightens the content beneath the element

  • Color-burn − Darkens the content beneath the element

  • Hard-light − Produces a combination of multiply and screen effects based on the brightness of the underlying content

  • Soft-light − Produces a similar effect to shining a diffused light on the content beneath the element

  • Difference − Produces an effect that highlights the differences between the element and the content beneath it

  • Exclusion − Produces a similar effect to difference, but with less contrast

  • Applying Mix-Blend-Mode

To apply mix-blend-mode to an element in CSS, you simply need to set the property to the desired blending mode. Here's an example −

.blended-element {
   mix-blend-mode: multiply;

This code set the blending mode of the .blended-element class to multiply. This means that any content beneath this element will be darkened.

You can also apply mix-blend-mode to the background of an element using the background-blend-mode property. This allows you to create interesting effects with background images and other elements on the page.

.background-element {
   background-image: url('background-image.jpg');
   background-blend-mode: screen;

The code set the background image of the .background-element class to background-image.jpg and set the background-blend-mode to screen. This means that the background image will be lightened, producing a brightening effect.


<!DOCTYPE html>
   <title>Blending Elements in CSS</title>
      .blended-element {
         background-color: #ff00ff;
         mix-blend-mode: multiply;
         width: 300px;
         height: 200px;
      .background-element {
         background-image: url('background-image.jpg');
         background-size: cover;
         background-blend-mode: screen;
         width: 100%;
         height: 500px;
   <div class="blended-element">
      <h1>Blended Element</h1>
      <p>This element is using mix-blend-mode to darken the content beneath it.</p>
   <div class="background-element">
      <h1>Background Element</h1>
      <p>This element is using background-blend-mode to lighten the background image.</p>


  • In this example, we have created two div elements. The first div has a class of blended-element and is using mix-blend-mode: multiply; to darken the content beneath it. The second div has a class of background-element and is using background-blend-mode: screen; to lighten the background image.

  • We have also added some basic styling to the elements using CSS. The .blended-element has a pink background color, while the .background-element has a background image and is set to cover the full width and height of the page.

We will strongly recommend the readers to try all the blending modes mentioned to have more understanding of the topic.

Tips and Considerations

When using mix-blend-mode, there are a few tips and considerations to keep in mind −

  • Be mindful of the impact of blending modes on text content. Blending modes can make text difficult to read, so it's important to test the effect on text content before implementing it on a live site.

  • Not all blending modes are supported by all browsers. Check browser compatibility before using a specific blending mode.

  • Be sure to test mix-blend-mode in different contexts to ensure that it produces the desired effect.

  • Consider using background-blend-mode in addition to mix-blend-mode to create complex visual effects.

  • In conclusion, mix-blend-mode is a powerful tool for creating interesting visual effects in CSS. With a variety of blending modes available, you


This article explains how to blend elements in CSS using the mix-blend-mode property. The article provides an overview of blending modes and their effects and explains how to apply the mix-blend-mode property to HTML elements and backgrounds.

Updated on: 17-Apr-2023


Kickstart Your Career

Get certified by completing the course

Get Started