You're looking at the documentation for Tailwind CSS v2.
Tailwind CSS on GitHub

Background Blend Mode

Tailwind CSS version

Utilities for controlling how an element's background image should blend with its background color.

Default class reference

bg-blend-normalbackground-blend-mode: normal;
bg-blend-multiplybackground-blend-mode: multiply;
bg-blend-screenbackground-blend-mode: screen;
bg-blend-overlaybackground-blend-mode: overlay;
bg-blend-darkenbackground-blend-mode: darken;
bg-blend-lightenbackground-blend-mode: lighten;
bg-blend-color-dodgebackground-blend-mode: color-dodge;
bg-blend-color-burnbackground-blend-mode: color-burn;
bg-blend-hard-lightbackground-blend-mode: hard-light;
bg-blend-soft-lightbackground-blend-mode: soft-light;
bg-blend-differencebackground-blend-mode: difference;
bg-blend-exclusionbackground-blend-mode: exclusion;
bg-blend-huebackground-blend-mode: hue;
bg-blend-saturationbackground-blend-mode: saturation;
bg-blend-colorbackground-blend-mode: color;
bg-blend-luminositybackground-blend-mode: luminosity;


Use the bg-blend-{mode} utilities to control how an element’s background image should be blended its background color.

<div class="bg-blend-multiply ...">
  <!-- ... -->


To control the background-blend-mode property at a specific breakpoint, add a {screen}: prefix to any existing background-blend-mode utility. For example, use md:bg-blend-darken to apply the bg-blend-darken utility at only medium screen sizes and above.

<div class="bg-blend-lighten md:bg-blend-darken ...">
  <!-- ... -->

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.



By default, only responsive variants are generated for background-blend-mode utilities.

You can control which variants are generated for the background-blend-mode utilities by modifying the backgroundBlendMode property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       backgroundBlendMode: ['hover', 'focus'],


If you don't plan to use the background-blend-mode utilities in your project, you can disable them entirely by setting the backgroundBlendMode property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     backgroundBlendMode: false,