Skip to main content

Understanding CSS Blend Modes

CSS Blend Modes allow you to create visually engaging effects by blending elements with their backgrounds. In this tutorial, we'll explore the different blend modes available and how to apply them.

Available Blend Modes​

There are several blend modes you can use:

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

Background Blend Modes​

To apply a blend mode to an element's background, use the background-blend-mode property.

Example:

CSS
div {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-blend-mode: multiply;
}

Mix Blend Modes​

To apply a blend mode between an element and its parent, use the mix-blend-mode property.

Example:

CSS
.overlay {
  mix-blend-mode: screen;
}

Resetting Blend Modes​

To reset the blend mode applied to an element, use the normal value.

Example:

CSS
.overlay:hover {
  mix-blend-mode: normal;
}

Conclusion​

In this tutorial, we learned about CSS Blend Modes, the different blend modes available, and how to apply them. By using blend modes, you can create visually striking effects on your web pages, enhancing the overall design and user experience.