You can find a collection with all the optical illusions in this article (and more!) on CodePen. You can move your mouse over many of the demos below to reveal the effect or stop the animations.
1 - Poggendorff Illusions
The Poggendorff illusion is an optical illusion in which a diagonal line interrupted by a vertical bar appears misaligned, even when both segments are actually continuous.
A simple version of this effect can be seen in the following demo. I used the ::before and ::after pseudo-elements to create the diagonal line and the vertical bar, respectively.
The effect can also be seen in a more elaborate version with multiple diagonal lines and vertical bars:
This drawing can easily be achieved using two CSS gradients: one tilted at 70 degrees and another consisting of a series of vertical columns. I applied it to the body , although I could have used :root instead.
Another variation of this illusion is the Münsterberg Poggendorff Arch, in which the two sides of an arch appear misaligned and seem as though they will not meet at the top - but they do (mouse over to see it).
2 - Induced Gradients
The following illusions combine gradients and flat colors. Surprisingly, some of the gradients do not actually exist. They are simple gray bars that, when placed over a gradient, appear to have gradients themselves.
Take the following demo: 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.
... continue reading