Tailwind CSS Mix Blend Mode - GeeksforGeeks

24 Jun, 2021
This class accepts lots of value in Tailwind CSS in which all the properties are covered in class form. This class is used to specify how an element’s content should be blended with the background. In CSS, we can do that by using the CSS mix-blend-mode property.
Mix Blend Mode classes :
mix-blend-normal: No blending is applied to the element.
mix-blend-multiply: This multiplies the element’s color with the background. The resulting color is always as dark as the background.
mix-blend-screen : This multiplies the element’s color with the background and then complements the result. The resulting color is always as bright as one of the blended layers.
mix-blend-exclusion: This subtracts the darker of two colors from the lightest color of the element. The result is similar to ‘difference’ but with lower contrast.
mix-blend-overlay: This applies ‘multiply’ on lighter colors and ‘screen’ on darker colors in the element. The effect is effectively the opposite of ‘hard-light’.
mix-blend-darken :  This replaces the background with the element’s color where the element is darker.
mix-blend-lighten : This replaces the background with the element’s color where the element is lighter.
mix-blend-color-dodge:  This lightens the background color to reflect the color of the element.
mix-blend-color-burn : This darkens the background color to reflect the natural colors of the image. The result has increased the amount of contrast between the element and the background.
mix-blend-hard-light:  This applies ‘multiply’ on lighter colors and ‘screen’ on darker colors of the element. This effect is effectively the opposite of ‘overlay’.
mix-blend-soft-light : This applies ‘multiply’ on lighter colors and ‘screen’ on darker colors in the element. The resulting effect is softer than that of ‘overlay’.
mix-blend-difference: This subtracts the absolute difference between the background color and the element’s color.
mix-blend-hue : This applies the hue of the element with the saturation and luminosity of the background.
mix-blend-saturation: This applies the saturation of the element with the hue and luminosity of the background.
mix-blend-color: This applies the hue and saturation of the element with the luminosity of the background.
mix-blend-luminosity:  This applies the luminosity of the element with the hue and saturation of the background.
Syntax :
<div class="mix-blend-{mode}" >
    ...
</div>
Note: The mix-blend-mode CSS property sets how an element’s content should blend with the content of the element’s parent and the element’s background.
 
Example 1: The following code uses classes mix-blend-normal, mix-blend-multiply, mix-blend-overlay.
HTML
<!DOCTYPE html><html>  <head>    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"        rel="stylesheet"></head>  <body>    <div class="m-auto bg-pink-100 w-2/6 h-25 p-3">        <h3 class="text-center">            mix-blend-mode        </h3>            <div class="mix-blend-normal p-8">            <h1>normal</h1>            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">        </div>          <div class="mix-blend-multiply p-8">            <h1>multiply</h1>            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">        </div>          <div class="mix-blend-overlay p-8">            <h1>overlay</h1>            <img src="https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">        </div>    </div></body>  </html>
Output:
Example 2: The following code uses mix-blend-exclusion, mix-blend-color-burn and mix-blend-hard-light.
HTML
<!DOCTYPE html><html>  <head>    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"        rel="stylesheet"></head>  <body>    <div class="m-auto bg-pink-100 w-2/6 h-25 p-3">        <h1 class="text-center text-xl ">            mix-blend-mode        </h1>          <div class="mix-blend-color-burn  p-8">            <h1>color-burn</h1>            <img class="h-35" src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" />        </div>          <div class="mix-blend-hard-light p-8">            <h1>hard-light</h1>            <img class="h-40" src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" />        </div>          <div class="mix-blend-exclusion p-8">            <h1>exclusion</h1>            <img class="h-40" src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" />        </div>    </div></body>  </html>
Output:
Tailwind CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript