Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS mix-blend-mode Property

Posted in CSS Tutorial
Updated on Jul 26, 2024
By Mari Selvan
πŸ‘οΈ 31 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
CSS mix-blend-mode Property

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
Copy To Clipboard
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

ValueDescription
normalThe element does not blend with its background; this is the default behavior.
multiplyThe background color is multiplied by the color of the element, resulting in a darker color.
screenThe inverse of the background color and the inverse of the color of the element are multiplied, resulting in a lighter color.
overlayCombines multiply and screen modes; the background is multiplied or screened based on the background color.
darkenThe resulting color is the darker of the background and the element's color.
lightenThe resulting color is the lighter of the background and the element's color.
color-dodgeThe background color is brightened to reflect the color of the element.
color-burnThe background color is darkened to reflect the color of the element.
hard-lightSimilar to overlay, but uses the color of the element.
soft-lightA softer version of hard-light.
differenceSubtracts the darker of the colors from the lighter of the colors.
exclusionSimilar to difference, but with lower contrast.
huePreserves the luma and chroma of the background while adopting the hue of the element.
saturationPreserves the luma and hue of the background while adopting the saturation of the element.
colorPreserves the luma of the background while adopting the hue and chroma of the element.
luminosityPreserves 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
Copy To Clipboard
<!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.

πŸ‘¨β€πŸ’» Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
πŸ‘‹ Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy