Last updated on March 19, 2026

Background Blend Mode

Usage

Please refer to the documentation on the Tailwind CSS website

Compatibility

Class	Support
`bg-blend-normal`	✅ Supported
`bg-blend-multiply`	✅ Supported
`bg-blend-screen`	✅ Supported
`bg-blend-overlay`	✅ Supported
`bg-blend-darken`	✅ Supported
`bg-blend-lighten`	✅ Supported
`bg-blend-color-dodge`	✅ Supported
`bg-blend-color-burn`	✅ Supported
`bg-blend-hard-light`	✅ Supported
`bg-blend-soft-light`	✅ Supported
`bg-blend-difference`	✅ Supported
`bg-blend-exclusion`	✅ Supported
`bg-blend-hue`	✅ Supported
`bg-blend-saturation`	✅ Supported
`bg-blend-color`	✅ Supported
`bg-blend-luminosity`	✅ Supported

Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

🌐 Web only

Ring Width

Previous Page

Box Shadow

Next Page