Tailwind CSS Background Blend Mode

Tailwind CSS provides classes for background blend mode that can be used to blend colors of the background image and background color.

Syntax

bg-blend-{mode}

Where mode can be any of the following:

• normal
• multiply
• screen
• overlay
• darken
• lighten
• color-dodge
• color-burn
• hard-light
• soft-light
• difference
• exclusion
• hue
• saturation
• color
• luminosity

Example

<div class="bg-gradient-to-br from-purple-500 to-pink-500 h-screen">
  <h1 class="text-white text-4xl font-bold p-10 bg-blend-screen">Hello World</h1>
</div>

Output

The above example will produce a purple and pink gradient background with the text "Hello World" in white color blended with the screen mode.

Explanation

The background blend mode property sets how the background image and background color should blend with each other. The blend mode is applied to the element's background image and background color.

Use

The background blend mode classes can be used to create custom backgrounds with different blend modes to make the background and text more visually appealing.

Important Points

• The background blend mode classes should be used with the bg- utility classes to apply it to the element's background.
• The background blend mode classes apply to the element's background image and color, therefore, they won't work on elements without a background image or color.

Summary

Tailwind CSS background blend mode classes can be used to create custom background colors with different blending modes. These classes provide a variety of blending options that can be used to enhance the appearance of the website. It saves time and effort to write custom CSS for blending images and colors.