Tailwind CSS - Mix Blend Mode

Previous
Quiz
Next

Tailwind CSS Mix Blend Mode is a utility class that provides an effective way of controlling how an element should blend with the background.

Tailwind CSS Mix Blend Mode Classes

The following is the list of Tailwind CSS Mix Blend Mode classes that provide an effective way of handling how an element should blend with the background.

class CSS Properties
mix-blend-normal mix-blend-mode: normal;
mix-blend-multiply mix-blend-mode: multiply;
mix-blend-screen mix-blend-mode: screen;
mix-blend-overlay mix-blend-mode: overlay;
mix-blend-darken mix-blend-mode: darken;
mix-blend-lighten mix-blend-mode: lighten;
mix-blend-color-dodge mix-blend-mode: color-dodge;
mix-blend-color-burn mix-blend-mode: color-burn;
mix-blend-hard-light mix-blend-mode: hard-light;
mix-blend-soft-light mix-blend-mode: soft-light;
mix-blend-difference mix-blend-mode: difference;
mix-blend-exclusion mix-blend-mode: exclusion;
mix-blend-hue mix-blend-mode: hue;
mix-blend-saturation mix-blend-mode: saturation;
mix-blend-color mix-blend-mode: color;
mix-blend-luminosity mix-blend-mode: luminosity;
mix-blend-plus-darker mix-blend-mode: plus-darker;
mix-blend-plus-lighter mix-blend-mode: plus-lighter;

Functionality of Tailwind CSS Mix Blend Mode Classes

  • mix-blend-normal: This class is used to set the blending mode to normal.
  • mix-blend-multiply: This class is used to set the blending mode to multiply.
  • mix-blend-screen: This class is used to set the blending mode screen.
  • mix-blend-overlay: This class is used to set the blending mode overlay.
  • mix-blend-darken: This class is used to set the blending mode darken.
  • mix-blend-lighten: This class is used to set the blending mode lighten.
  • mix-blend-color-dodge: This class is used to set the blending mode color-dodge.
  • mix-blend-color-burn: This class is used to set the blending mode color-burn.
  • mix-blend-hard-light: This class is used to set the blending mode hard-light.
  • mix-blend-soft-light: This class is used to set the blending mode soft-light.
  • mix-blend-difference: This class is used to set the blending mode difference.
  • mix-blend-exclusion: This class is used to set the blending mode exclusion.
  • mix-blend-hue: This class is used to set the blending mode hue.
  • mix-blend-saturation: This class is used to set the blending mode saturation.
  • mix-blend-color: This class is used to set the blending mode color.
  • mix-blend-luminosity: This class is used to set the blending mode luminosity.
  • mix-blend-plus-darker: This class is used to set the blending mode plus-darker.
  • mix-blend-plus-lighter: This class is used to set the blending mode plus-lighter.

Tailwind CSS Mix Blend Mode class Examples

The following examples will illustrate the Tailwind CSS Mix Blend Mode class utility.

Setting Element's Mix Blend Mode

In the following example, we will create two divs and use 'mix-blend-*' to blend the color of both divs.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Mix Blend Mode
    </h2>
    <div class="flex -space-x-14">
        <div class="mix-blend-multiply bg-red-800 
                    w-36 h-36 rounded-full">
        </div>
        <div class="mix-blend-multiply bg-yellow-800 
                    w-36 h-36 rounded-full">
        </div>
    </div>
</body>

</html>

Changing Mix Blend Mode on Hover

We will keep the blend mode in 'mix-blend-multiply' and change it to 'mix-blend-overlay' when hovering over the second div element.

Example

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Mix Blend Mode
    </h2>
    <div class="flex -space-x-14">
        <div class="mix-blend-multiply bg-red-800
                    w-36 h-36">
        </div>
        <div class="mix-blend-multiply bg-yellow-800 
                    hover:mix-blend-overlay
                    w-36 h-36 ">
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next