Wertheimer-Koffka Ring Illusion - CSS Optical Illusion

Code Live Demo

:root {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, #0000 10vmin, #ccc 0 14vmin, #0000 0),
    linear-gradient(90deg, #fff 50%, #000 0);
  
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 3vmin;
    height: 36vmin;
    background: linear-gradient(90deg, #0000 50%, #0003 0), red;
    opacity:1;
  }
}

About This Illusion

The Wertheimer-Koffka Ring Illusion is a visual phenomenon where rings appear to have different brightness or color due to the surrounding context, even though the rings color is uniform.

In CSS, the main effect can be achieved with two gradients (one linear and one radial). Then a pseudo-element to create the bar in the middle.

Try This

Mouse over the demo to see the illusion in action.