Over the past week, I have coded a series of optical illusions using CSS only (and some HTML for one of them, but most of them are CSS only). I created a collection on CodePen with 40 of them, although the number may grow in the next few weeks.
Many of them play with color effects, some others are animated, many of them should have (and do have) a motion warning... although probably I should add it to more. Coding some of them I got really dizzy 😬
These are some of my favorites from the collection:
Mainz-Linez Illusion
This one is animated (and it looks better in narrower/larger screens). The idea is to look at the red dots, and notice how they are moving up and down. Then focus on any of the black crosses... suddenly the red dots start moving in a wavy motion!
For this one (and the next one), I used a super ingenious wave shape generator by @afif.
Curvature Blindness
These set of curves are almost equal: the only thing that changes is their colors. Painting them from inflection point to inflection point or from peak to peak will make them look completely different. To the point that one of them kind of stops looking like a wave! (This one looks better in smaller screens).
Gray Color Circles
Do you see red, blue, and green spheres? What if I told you that they are all gray? (They really are! Mouse over the demo to reveal them) But overlapping some primary colors on top, the brain will "fill in" the circles with the colors at hand. At the beginning I was making the lines too tall and the effect was not visible. I like the end result.
Gray Bars
The two side columns, and the line in the middle are all the same flat gray color. Yes a single tone of gray. The only gradient is the background, not the lines in themselves. I liked that this demo is easy to see and easy to code.
The Breathing Square
Another animated one that you'll need to go see at CodePen. The blue square looks like it's pulsating or breathing. Growing and shrinking in sequence... but in reality it is the same square with the same size, just spinning. Mouse over to reveal it.
And like these five, there are 35 more. Check them out! I hope you like them. And I will be adding more in the next few weeks.
Top comments (14)
Ohhh nooo my brain!!!!
Touch it and it will explode, huh?
Amazing! And now my eyes are blinking like a Christmas tree!
Wow, I LOVE CSS art 😍😍😍
This is pure poetry :)
OMG, Son buenas!!!
WhOoOOaAaa!
Woaaawh i like it
This looks great 👏
waw
This is awesome 👏
These aren’t just CSS tricks — they’re real perception experiments done with web primitives, which makes them even cooler.
The gray color and gray bars illusions are especially strong — simple, readable, and instantly mind-bending 😅
Also appreciate the motion warnings and hover-to-reveal details.
Great reminder that CSS can be a perceptual medium, not just layout.
🫡🫡🫡
Some comments may only be visible to logged-in visitors. Sign in to view all comments.