
How to Blend Elements Together in CSS
Did you know that you can use pure CSS to blend images together with the mix-blend-mode
property in the following way?
<style>
.isolate {
isolation: isolate;
}
.circle {
mix-blend-mode: screen;
}
</style>
<div class="isolate">
<div class="circle r"></div>
<div class="circle g"></div>
<div class="circle b"></div>
</div>
Copied to clipboard!
Note, that it's important to set the parent's isolation
to isolate
if you don't want to blend with the background. The possible values for mix-blend-mode
are:
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
Copied to clipboard!


Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

Resources:
π More Webtips
Master the Art of Frontend
Unlimited access to hundred of tutorials
Access to exclusive interactive lessons
Remove ads to learn without distractions