CSS mix-blend-mode Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 47 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The mix-blend-mode property in CSS allows you to control how the content of an element blends with the content of the element's parent and the background.

This property is particularly useful for creating artistic effects, such as overlays and color changes, by blending elements together using different modes.

💡 Syntax

The syntax for the mix-blend-mode property is straightforward. You can apply it to any element to define how its content should blend with the content beneath it.

Syntax

Copied

element {
  mix-blend-mode: blend-mode;
}

Here, blend-mode can be any of the predefined blending modes.

🎛️ Default Value

The default value of the mix-blend-mode property is normal, which means no blending is applied.

🏠 Property Values

Value	Description
normal	The element does not blend with its background; this is the default behavior.
multiply	The background color is multiplied by the color of the element, resulting in a darker color.
screen	The inverse of the background color and the inverse of the color of the element are multiplied, resulting in a lighter color.
overlay	Combines multiply and screen modes; the background is multiplied or screened based on the background color.
darken	The resulting color is the darker of the background and the element's color.
lighten	The resulting color is the lighter of the background and the element's color.
color-dodge	The background color is brightened to reflect the color of the element.
color-burn	The background color is darkened to reflect the color of the element.
hard-light	Similar to overlay, but uses the color of the element.
soft-light	A softer version of hard-light.
difference	Subtracts the darker of the colors from the lighter of the colors.
exclusion	Similar to difference, but with lower contrast.
hue	Preserves the luma and chroma of the background while adopting the hue of the element.
saturation	Preserves the luma and hue of the background while adopting the saturation of the element.
color	Preserves the luma of the background while adopting the hue and chroma of the element.
luminosity	Preserves the hue and chroma of the background while adopting the luma of the element.

📄 Example

In this example, we will demonstrate the use of the mix-blend-mode property to blend a text element with its background image.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS mix-blend-mode Example</title>
  <style>
    body {
      background: url('background.jpg') no-repeat center center/cover;
      margin: 0;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }
    h1 {
      font-size: 3em;
      mix-blend-mode: difference;
    }
  </style>
</head>
<body>
  <h1>Blending Text with Background</h1>
</body>
</html>

In this example, the text color will dynamically change based on the colors in the background image, creating a unique blend effect.

🖥️ Browser Compatibility

The mix-blend-mode property is widely supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The mix-blend-mode property is a powerful tool for creating creative and dynamic visual effects on your website.

By blending elements with their backgrounds in various ways, you can achieve a range of effects from subtle to dramatic. Experiment with different blend modes to find the perfect effect for your project and enhance the visual appeal of your site.