Nearby lessons

71 of 71

🎨 Tailwind CSS - Background Blend Mode

📖 Overview

Background blend mode utilities control how an element's background image blends with its background color. These map to the CSS background-blend-mode property.

📏 Background Blend Mode Utilities

Available utilities (same values as mix-blend-mode):

  • bg-blend-normal - No blending
  • bg-blend-multiply - Multiply blend
  • bg-blend-screen - Screen blend
  • bg-blend-overlay - Overlay blend
  • bg-blend-darken - Darken blend
  • bg-blend-lighten - Lighten blend
  • bg-blend-color-dodge, bg-blend-color-burn
  • bg-blend-difference, bg-blend-exclusion
  • bg-blend-hue, bg-blend-saturation, bg-blend-color, bg-blend-luminosity
Example02
Loading editor…

🧠 Test Your Knowledge

1 Questions
Progress: 0 / 1