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=
</div>
<div class="mix-blend-multiply p-8">
<h1>multiply</h1>
<img src=
</div>
<div class="mix-blend-overlay p-8">
<h1>overlay</h1>
<img src=
</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=
</div>
<div class="mix-blend-hard-light p-8">
<h1>hard-light</h1>
<img class="h-40" src=
</div>
<div class="mix-blend-exclusion p-8">
<h1>exclusion</h1>
<img class="h-40" src=
</div>
</div>
</body>
</html>
|
Output: