Tailwind CSS - Mix Blend Mode

Tailwind CSS: Mix Blend Mode

Tailwind provides utility classes for the mix-blend-mode CSS property, which controls how an element’s content should blend with the content of the element’s direct parent.

Available Mix Blend Mode Classes

Tailwind includes utilities for all standard mix-blend-mode values. These allow you to create compelling visual effects, like text that interacts with a background image or layered color effects.

Class	CSS Property
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;

Note: The non-standard mix-blend-plus-darker and mix-blend-plus-lighter utilities are not part of the core Tailwind CSS framework as of v3.0, as they lack broad browser support.

Practical Application of Mix Blend Mode

A common use case is blending text or graphical elements over a background image. In this example, we’ll place a heading and a semi-transparent overlay over an image, using mix-blend-mode to create a dynamic color effect.

Example: Blending Text and an Overlay on an Image

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- For demonstration purposes only. Use the CLI for production. -->
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Mix Blend Mode Example</title>
</head>
<body class="bg-slate-800 p-4 sm:p-8">

  <h1 class="text-center text-3xl font-bold text-white mb-8">Image Blend Effect</h1>

  <div class="grid max-w-4xl grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 mx-auto">

    <!-- Example 1: Multiply -->
    <div class="relative isolate h-64 w-full rounded-lg shadow-lg">
      <img src="https://images.unsplash.com/photo-1695653422853-06d84a441334?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5OTU4MjE2NA&ixlib=rb-4.0.3&q=80&w=1080" alt="Abstract art" class="absolute inset-0 h-full w-full rounded-lg object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-cyan-400 mix-blend-multiply"></div>
      <h2 class="absolute inset-0 flex items-center justify-center text-4xl font-black text-white mix-blend-screen">MULTIPLY</h2>
    </div>

    <!-- Example 2: Overlay -->
    <div class="relative isolate h-64 w-full rounded-lg shadow-lg">
      <img src="https://images.unsplash.com/photo-1698239923884-3e839e3a6c22?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5OTU4MjI4Mw&ixlib=rb-4.0.3&q=80&w=1080" alt="Abstract art" class="absolute inset-0 h-full w-full rounded-lg object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-fuchsia-500 mix-blend-overlay"></div>
      <h2 class="absolute inset-0 flex items-center justify-center text-4xl font-black text-white">OVERLAY</h2>
    </div>

    <!-- Example 3: Difference -->
    <div class="relative isolate h-64 w-full rounded-lg shadow-lg">
      <img src="https://images.unsplash.com/photo-1698862523223-285b73a4b95f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY5OTU4MjM1Mg&ixlib=rb-4.0.3&q=80&w=1080" alt="Abstract art" class="absolute inset-0 h-full w-full rounded-lg object-cover">
      <h2 class="absolute inset-0 flex items-center justify-center text-4xl font-black text-white mix-blend-difference">DIFFERENCE</h2>
    </div>

  </div>
</body>
</html>

In this example:

1. The parent div for each card is set to relative and isolate. The isolate class creates a new stacking context, which is crucial for mix-blend-mode to work predictably, ensuring the blend effect is contained within the card and doesn’t blend with the page background.
2. An <img> tag is used for the background, positioned with absolute inset-0 to fill the container.
3. In the first card, a div with bg-cyan-400 and mix-blend-multiply is layered on top. This multiplies the cyan color with the image pixels. The text above it uses mix-blend-screen to create a high-contrast effect.
4. The other cards demonstrate different blend modes for varied visual outcomes.

Changing Mix Blend Mode on Hover

Like most utilities in Tailwind, you can apply mix-blend-mode conditionally using state variants like hover:. This allows for interactive and dynamic effects.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex h-screen items-center justify-center bg-slate-900">
  <div class="flex items-center justify-center -space-x-16">
    <div class="h-48 w-48 rounded-full bg-cyan-500"></div>
    <div class="h-48 w-48 rounded-full bg-fuchsia-500 mix-blend-lighten transition-all duration-300 hover:mix-blend-darken">
    </div>
  </div>
</body>
</html>

In this example, the overlapping area of the two circles initially uses mix-blend-lighten. When you hover over the second circle, the class hover:mix-blend-darken activates, changing the blend mode and thus the color of the overlapping section.