: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 squares appear to be different shades of blue, but they are the same color. This time, you can mouse over to reveal the effect
I coded this demo using mix-blend-mode and linear gradients in CSS.
Try This
- Mouse over the demo to see the effect.