How to Blend Elements Together in CSS

<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>

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;