:root {
height: 100vh;
background:
linear-gradient(#aaa 0 0) 0 0 / 5vw 100%,
linear-gradient(#aaa 0 0) 100% 0 / 5vw 100%,
linear-gradient(#aaa 0 0) 50% 50% / 70% 7.5vw,
linear-gradient(90deg, #666, #eee);
background-repeat: no-repeat;
}
About This Illusion
All three bars (two vertical ones on the sides and one horizontal bar in the center) are the same shade of gray. The only real gradient is behind them, which tricks our brain into believing that the bars are different colors and even contain gradients.
CSS-wise, this is another super-easy illusion to create. We just need to create a background with four layers: two linear gradients for the vertical bars on the sides, one linear gradient for the horizontal bar in the center, and one final linear gradient for the background gradient.
Try This
- Look at the right and left bars :)