CSS Optical Illusions

Source: Dev.to

Over the past week, I have coded a series of optical illusions using CSS only (with a bit of HTML for one of them). I created a CodePen collection with 40 of them, and the number may grow in the next few weeks.

Many of the demos play with color effects, some are animated, and most include a motion warning—though I should probably add more warnings. Coding some of them made me really dizzy 😬

Favorites

Mainz‑Linez Illusion

This animated demo looks better on narrower or larger screens. Focus on the red dots and watch them move up and down; then shift your focus to any of the black crosses, and the red dots start moving in a wavy motion!

For this and the next illusion, I used a super‑ingenious wave shape generator by @afif.

Curvature Blindness

A set of almost identical curves differ only in color. Viewing them from inflection point to inflection point or from peak to peak makes them appear completely different—so much so that one of them stops looking like a wave at all. (This one looks better on smaller screens.)

Gray Color Circles

Do you see red, blue, and green spheres? They’re actually all gray. Hover over the demo to reveal the true colors. Overlapping primary colors tricks the brain into “filling in” the circles with those colors. I initially made the lines too tall, which hid the effect, but the final result works well.

Gray Bars

The two side columns and the central line share the exact same flat gray tone—there’s no gradient in the lines themselves, only in the background. This demo is both easy to see and easy to code.

The Breathing Square

Another animated piece that requires viewing on CodePen. The blue square appears to pulsate or “breathe”—growing and shrinking—but it’s actually the same size throughout, merely rotating. Hover to reveal the trick.

And like these five, there are 35 more. Check them out! I hope you enjoy them, and I’ll be adding more in the coming weeks.