:root {
margin: 0;
height: 100vh;
overflow: hidden;
}
:root::before,
:root::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 110vmax;
height: 110vmax;
background: repeating-linear-gradient(90deg, #ddd 15vmin, #222 30vmin, #eee 45vmin);
filter: blur(1vmax)
}
:root::after {
width: 100%;
height: 4vmin;
background: #777;
filter: none;
}
About This Illusion
It looks like the central line has a repeating gradient of dark and light grays, but in reality it is a flat color. If you mouse over the demo, the bar will expand, making it clear that there is no gradient at all.
In this one, I used the pseudo-elements ::before and ::after to create
both the blurred background and the central bar respectively. I had to make the blurred background
extra large to avoid seeing the blurred edges.
Try This
- Mouse over the demo to reveal the effect.