Color Spheres Illusion - CSS Optical Illusion

Code Live Demo

:root {
  font-size: 12px;

  &::after {
    background: 
      radial-gradient(farthest-side at 45% 45%, #0000 60%, #0004),
      radial-gradient(farthest-side at 33% 33%, #fffc 0%, #fff0),
      radial-gradient(farthest-side at 20% 20%, #0000 0%, #0004),
      #ba9;
    background-size: 33.333% 33.333%;
    content: "";
    height: 30em;
    left: 50%;
    --m: repeating-linear-gradient(#000 0 0.666em, #0000 0 1em);
    mask:
      radial-gradient(#fff 50%, #0000 0) 0 0 intersect,
      var(--m) 0 0 no-repeat,
      var(--m) 50% 0.333em no-repeat,
      var(--m) 100% 0.666em no-repeat,
      var(--m) 0 calc(50% + 1em / 3) no-repeat,
      var(--m) 50% calc(50% + 1em / 3 * 2) no-repeat,
      var(--m) 100% 50% no-repeat,
      var(--m) 0 calc(100% + 1em / 3 * 2) no-repeat,
      var(--m) 50% 100% no-repeat,
      var(--m) 100% calc(100% + 1em / 3) no-repeat;
    mask-size: 33.333% 33.333%;
    position: absolute;
    top: 20em;
    translate: -50% -33.333%;
    width: 30em;
  }

  &::before {
    background:
      linear-gradient(#00f 33.33%, #0f0 0 66.66%, #f00 0) 0 0 / 1em 1em;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

About This Illusion

The circles (or spheres) look red, blue, or green, but in reality they are all the same grayish color. Our brain "colorizes" them based on the lines that overlap the shapes. Don't believe it? Mouse over the illustration.

This one was a bit tricky to code with CSS. I opted for masking the spheres individually, which wasn't extremely difficult, but it was a small pain to do. Possibly there are better options, but it works, so I won't touch it for now.

Try This

Mouse over the demo to see the illusion in action.