:root {
height: 100vh;
background:
repeating-linear-gradient(#fff 0 8.3333vh, #000 0 16.6666vh);
display: flex;
justify-content: space-evenly;
&::before, &::after {
content: "";
width: 20vw;
background: #888;
mix-blend-mode: darken;
}
&::after {
mix-blend-mode: lighten;
}
}
About This Illusion
These two gray columns in a black-and-white grid are the same shade of gray, but the one surrounded by black appears darker than the one surrounded by white.
I coded this demo using mix-blend-mode so I could try something a bit different. That worked well, but it also made it harder to showcase the effect on hover. In hindsight, I should have planned that better.
Try This
- Look closely at the two gray columns.