CSS Optical Illusions

Summary

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. Here is another variation of this effect. 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. 3 - Cornsweet Illusion The next few optical illusions share a common idea: some colors are identical, but they do not look the sam...