Motion Note: this static illustration may appear to move, and could cause dizziness, nausea, or headache in sensitive viewers. To view it click on the "Live Demo" button below. If you experience any discomfort, please stop viewing the illusion and consider taking a break.
:root {
--w: 7vmin;
--h: calc(var(--w) / 2);
min-height: 100vh;
margin: 0;
background:
radial-gradient(60% 35%, #000 50%, #0000 0) 0 0 / var(--w) var(--w),
radial-gradient(60% 35%, #000 50%, #0000 0) var(--h) var(--h) / var(--w) var(--w);
&::before {
content: "";
width: 85vmin;
aspect-ratio: 11/7;
background: #000;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
border-radius: 50%;
filter: blur(5vw);
}
}
About This Illusion
This is a trippy optical illusion. It is completely static, yet it looks like the black hole at the center is expanding - especially when you are not looking at it directly, creating the sensation of falling into a pit.
From a coding perspective, this one was very simple: a background pattern made with two radial gradients, plus a blurred pseudo-element for the "expanding" hole.
Try This
- Mouse over the demo to see the illusion in action.