Additive color mixing with «mix-blend-mode: screen»

by denvdmj

HTML

<h1>Additive color mixing with «mix-blend-mode: screen»</h1>
<div class="color-plate-1"></div>
<div class="color-plate-2"></div>

CSS

body {
  color: white;
  background: black;
}
[class^="color-plate-"] {
  position: absolute;
  width: 200px;
  height: 200px;
  top: calc(5em + var(--pos));
  left: var(--pos);
  mix-blend-mode: screen;
}

.color-plate-1 {
  background: #F00;
  --pos: 100px;
}

.color-plate-2 {
  background: #0F0;
  --pos: 50px;
}