How to Blend Elements Together in CSS

How to Blend Elements Together in CSS

Ferenc Almasi β€’ 2020 September 28 β€’ πŸ“– 1 min read

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>
blend.html
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;
blend-modes.css
Copied to clipboard!
How to Blend Elements Together in CSS
If you would like to see more Webtips, follow @flowforfrank

10 Best Practices for Quickly Improving Your CSS
Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScript

Resources:

Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Unlimited access to hundred of tutorials
  • check Access to exclusive interactive lessons
  • check Remove ads to learn without distractions
Become a Pro

Recommended