In this section, we will learn what the mix-blend-mode property is and how to use it in CSS.
Click here to run the example of mix-blend-mode property.
CSS mix-blend-mode Property Definition and Usage
When we use CSS `background-blend-mode` property, we can only blend background color and images of ONE ELEMENT ONLY.
But CSS provided another property named `mix-blend-mode` by which we can blend multiple elements.
This allows us to blend text, borders, background color of one element with a background image of its container, for example.
CSS mix-blend-mode Property Syntax
mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;
CSS mix-blend-mode Property Value
All the values used for `background-blend-mode` property can also be applied to the `mix-blend-mode` as well.
There are 15 values that can be set for this property. Each uses different mathematical calculations to control how images are blended:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The best way to learn how these values can blend the two or more background images is to check the two small app that we’ve built in the `background-blend-mode` section and see the effects of these values in real time.
The table below gives a description of each of the values used for `background-blend-mode` property:
Type of effect |
Blend modes |
Description |
Darken |
|
|
Lighten |
|
|
Contrast |
|
|
Composite |
|
|
Comparative |
|
|
This table is taken from the “CSS in Depth” book (Manning publication).
Note: there’s another value that we can set for this value which is “normal”. This is the default value and it is neutral (no blending).
Of course, the two global values “initial” and “inherit” can also be used for this property.
Example: mix-blend-mode in CSS
See the Pen mix-blend-mode in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.
Example: mix-blend-mode property exclusion
See the Pen mix-blend-mode property exclusion by Omid Dehghan (@enjoytutorials1) on CodePen.
Example: CSS mix-blend-mode property saturation value
See the Pen CSS mix-blend-mode property saturation value by Omid Dehghan (@enjoytutorials1) on CodePen.
Example: CSS mix-blend-mode property luminosity
See the Pen CSS mix-blend-mode property luminosity by Omid Dehghan (@enjoytutorials1) on CodePen.