The blend mode determines how two or more elements interact with each other when they overlap. For example,
html
1<div class="red"></div>
2<div class="blue"></div>
3<div class="green"></div>css
1div {
2 width: 100px;
3 height: 100px;
4 border-radius: 50%;
5 position: absolute;
6
7 mix-blend-mode: screen;
8}
9
10.red {
11 background-color: rgba(255, 0, 0, 1);
12}
13
14.blue {
15 background-color: rgba(0, 0, 255, 1);
16 left: 50px;
17}
18
19.green {
20 background-color: rgba(0, 255, 0, 1);
21 left: 25px;
22 top: 50px;
23}
The mix-blend-mode property controls the blend mode used for the elements. It accepts values such as normal, screen, overlay, darken, and so on. You can find a complete list of accepted values and their explanations here.
Lastly, there is also a background-blend-mode property that controls how an element's background images and background colors could blend with each other. For example,
html
1<div></div>css
1div {
2 width: 300px;
3 height: 400px;
4 background-image: url(. . .);
5 background-size: cover;
6 background-color: violet;
7
8 background-blend-mode: difference;
9}