Tailwind CSS - Background Blend Mode

Tailwind CSS: Background Blend Modes

Tailwind’s background-blend-mode utilities allow you to define how an element’s multiple background layers (like images and colors) should blend together. This brings the power of graphic design tools like Photoshop directly into your CSS, enabling rich, layered visual effects.

Background Blend Mode Classes

Here is a complete list of the available bg-blend-* utilities.

Class	CSS Properties
bg-blend-normal	background-blend-mode: normal;
bg-blend-multiply	background-blend-mode: multiply;
bg-blend-screen	background-blend-mode: screen;
bg-blend-overlay	background-blend-mode: overlay;
bg-blend-darken	background-blend-mode: darken;
bg-blend-lighten	background-blend-mode: lighten;
bg-blend-color-dodge	background-blend-mode: color-dodge;
bg-blend-color-burn	background-blend-mode: color-burn;
bg-blend-hard-light	background-blend-mode: hard-light;
bg-blend-soft-light	background-blend-mode: soft-light;
bg-blend-difference	background-blend-mode: difference;
bg-blend-exclusion	background-blend-mode: exclusion;
bg-blend-hue	background-blend-mode: hue;
bg-blend-saturation	background-blend-mode: saturation;
bg-blend-color	background-blend-mode: color;
bg-blend-luminosity	background-blend-mode: luminosity;

How to Use Background Blend Modes

To use a blend mode, an element must have at least two background layers. This is typically a background image and a background color or gradient. The blend mode defines how the top layer (e.g., the color) interacts with the layer(s) below it (e.g., the image).

Example: Duotone Image Effect

This example shows how to create a popular “duotone” image effect by blending a background image with a gradient. We’ll also change the blend mode on hover for a dynamic effect.

Note: To use custom background images, you must define them in your tailwind.config.js file. For this example, we’ll use an inline style for simplicity, but the recommended practice is to use your config file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Blend Mode Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 p-8 flex items-center justify-center min-h-screen">

<div
  class="w-96 h-64 rounded-xl shadow-lg bg-cover bg-center
         bg-gradient-to-br from-cyan-500 to-fuchsia-500
         bg-blend-multiply hover:bg-blend-screen
         transition-all duration-500 flex items-center justify-center"
  style="background-image: url('https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')">
  <h2 class="text-white text-3xl font-bold mix-blend-overlay">Hover Me</h2>
</div>

</body>
</html>

Practical Applications & Best Practices

• Image Filters: Quickly apply color tints to images using bg-blend-multiply or bg-blend-screen with a solid background color.
• Textured Backgrounds: Blend a subtle texture image with a solid color to add depth to your layouts.
• Interactive Effects: Use hover: and focus: variants to change blend modes for interactive feedback.
• mix-blend-mode: For blending a whole element with what’s behind it, explore the mix-blend-* utilities, which apply to the element itself rather than just its background.

Configuring Background Images

The recommended way to handle background images is within your tailwind.config.js file. This allows you to give them semantic names and reuse them easily.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'hero-pattern': "url('/img/hero-pattern.svg')",
        'footer-texture': "url('/img/footer-texture.png')",
      }
    }
  }
}

// Usage in HTML
// <div class="bg-hero-pattern">...</div>