Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Background Blend Mode

Quiz

Tailwind CSS Background Blend Mode is a utility class that provides an effective way of controlling how an element's background image should blend with its background color.

Tailwind CSS Background Blend Mode Classes

The following is the list of Tailwind CSS Background Blend Mode classes that provide an effective way of handling how an element's background image should blend with its background color.

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;

Functionality of Tailwind CSS Background Blend Mode classes

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

Tailwind CSS Background Blend Mode class Examples

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

Setting Background Blend Mode

We can set the background blend mode using the 'bg-blend-*' utilities to control how an element's background image(s) should blend with its background color.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        div {
            background: url('images/tree.jpg'), 
                        url('images/border.png');
        }
    </style>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Background Blend Mode
    </h2>
    <div class="flex w-full text-center">
        <div class="w-24 h-24 p-2 m-2 
                    bg-blend-saturation">
            saturation
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    bg-blend-luminosity">
            luminosity
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    bg-blend-darken">
            darken
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    bg-blend-hue">
            hue
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    bg-blend-normal">
            normal
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    bg-blend-overlay">
            overlay
        </div>
    </div>
</body>

</html>

Changing Background 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>
    <style>
        div {
            background: url('images/tree.jpg'), 
                        url('images/border.png');
        }
    </style>
</head>

<body class="p-4">
    <h2 class="text-xl mb-3">
        Tailwind CSS Background Blend Mode
    </h2>
    <Please Hover on Each Div<
    <div class="flex w-full text-center">
        <div class="w-24 h-24 p-2 m-2 
                    hover:bg-blend-saturation">
            saturation
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    hover:bg-blend-luminosity">
            luminosity
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    hover:bg-blend-darken">
            darken
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    hover:bg-blend-hue">
            hue
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    hover:bg-blend-normal">
            normal
        </div>
        <div class="w-24 h-24 p-2 m-2 
                    hover:bg-blend-overlay">
            overlay
        </div>
    </div>
</body>

</html>

Print Page