Nearby lessons

70 of 71

🎨 Tailwind CSS - Mix Blend Mode

📖 Overview

Mix blend mode utilities control how an element's content blends with the content behind it. These map to the CSS mix-blend-mode property.

📏 Mix Blend Mode Utilities

Available utilities:

  • mix-blend-normal - No blending (default)
  • mix-blend-multiply - Multiply blend
  • mix-blend-screen - Screen blend
  • mix-blend-overlay - Overlay blend
  • mix-blend-darken - Darken blend
  • mix-blend-lighten - Lighten blend
  • mix-blend-color-dodge - Color dodge
  • mix-blend-color-burn - Color burn
  • mix-blend-difference - Difference blend
  • mix-blend-exclusion - Exclusion blend
  • mix-blend-hue, mix-blend-saturation, mix-blend-color, mix-blend-luminosity
Example02
Loading editor…

🧠 Test Your Knowledge

2 Questions
Progress: 0 / 2