Loading course content...
Loading course content...
The blend mode determines how two or more elements interact with each other when they overlap. For example,
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>div {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
mix-blend-mode: screen;
}
.red {
background-color: rgba(255, 0, 0, 1);
}
.blue {
background-color: rgba(0, 0, 255, 1);
left: 50px;
}
.green {
background-color: rgba(0, 255, 0, 1);
left: 25px;
top: 50px;
}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.
The background-blend-mode property controls how an element's background images and background colors could blend with each other.
<div></div>div {
width: 300px;
height: 400px;
background-image: url(https://images.unsplash.com/photo-1705648336802-88f56d0d0cbc?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDkwMzYyODN8&ixlib=rb-4.0.3&q=85);
background-size: cover;
background-color: violet;
background-blend-mode: difference;
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <div class="red"></div> <div class="blue"></div> <div class="green"></div> </body> </html>