<blend-mode>
A type representing the mathematical way two colors mix together. Common values include 'multiply' (darkens), 'screen' (lightens), and 'overlay' (increases contrast), much like layer styles in Photoshop.
Syntax
/* Usage Example */
.overlay-text {
/* Blends the text color with the image behind it */
mix-blend-mode: color-burn;
}<blend-mode> Browser support
Widely available
Since
2020 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
35+
30+
8+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more