:root::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 70vmin;
aspect-ratio: 2;
background: linear-gradient(90deg, #fff0 25%, #f8f8f8 50%, #666 0, #0000 75%);
background-color: #bbb;
}
About This Illusion
The left and right ends are the same shade of gray. However, one looks lighter because it is closer to white, while the other looks darker because it is closer to black. Mouse over to reveal that they are, in fact, the same color.
Code-wise this is a single linear gradient from gray to white to black and back to gray again.
Try This
- Mouse over the demo to see the illusion in action.