Layering elements on a page will always be prevalent. It can be used to signify importance, alert new information, and more commonly, provide a nice design aesthetic. Looking more into the latter, layering is a great design aesthetic for any sight because it is a quick and effective way to provide a nice look and maintain attention. Today we’ll be looking at a CSS property that can take that to the next level, mix blend mode.
This CSS property is used to define how an element should be blended with the content underneath it, in terms of the z-index stack. Enough talk though, let’s look at the code!
.parent {
background-image: url('http://example.com/j.jpg");
}
.parent h1 {
mix-blend-mode: overlay;
/*
Common options:
overlay | multiply | difference | normal | hard-light
*/
}