Skip to main content
Version: v4

Mix Blend Mode

Usage

Please refer to the

documentation on the Tailwind CSS website

Compatibility

ClassSupport
mix-blend-normal✅ Full Support
mix-blend-multiply✅ Full Support
mix-blend-screen✅ Full Support
mix-blend-overlay✅ Full Support
mix-blend-darken✅ Full Support
mix-blend-lighten✅ Full Support
mix-blend-color-dodge✅ Full Support
mix-blend-color-burn✅ Full Support
mix-blend-hard-light✅ Full Support
mix-blend-soft-light✅ Full Support
mix-blend-difference✅ Full Support
mix-blend-exclusion✅ Full Support
mix-blend-hue✅ Full Support
mix-blend-saturation✅ Full Support
mix-blend-color✅ Full Support
mix-blend-luminosity✅ Full Support
mix-blend-plus-lighter✅ Full Support
Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

✅ Full support

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only