Mix Blend Mode

Usage

Please refer to the documentation on the Tailwind CSS website

Compatibility

Support applies to the documented values and platforms. See the RC compatibility notes for value limits and native migration alternatives. Browser behavior is evaluated separately.

Class	Support
`mix-blend-normal`	🌐 Web only
`mix-blend-multiply`	🌐 Web only
`mix-blend-screen`	🌐 Web only
`mix-blend-overlay`	🌐 Web only
`mix-blend-darken`	🌐 Web only
`mix-blend-lighten`	🌐 Web only
`mix-blend-color-dodge`	🌐 Web only
`mix-blend-color-burn`	🌐 Web only
`mix-blend-hard-light`	🌐 Web only
`mix-blend-soft-light`	🌐 Web only
`mix-blend-difference`	🌐 Web only
`mix-blend-exclusion`	🌐 Web only
`mix-blend-hue`	🌐 Web only
`mix-blend-saturation`	🌐 Web only
`mix-blend-color`	🌐 Web only
`mix-blend-luminosity`	🌐 Web only
`mix-blend-plus-darker`	🌐 Web only
`mix-blend-plus-lighter`	🌐 Web only

Legend

Class

-{n} Supports values from theme

-[n] Supports arbitrary values

Icon

✅ Supported

✔️ Partial support on native

🧪 Experimental support on native

📱 Native only

Not supported on native: rejected by the native CSS engine

🌐 Web only

Mix Blend Mode

Usage

Compatibility

Class

Icon

On this page