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๐ŸŒ 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-lighter๐ŸŒ Web only
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