7 min read
|
Saved February 14, 2026
|
Copied!
Do you care about this?
This article showcases various optical illusions created using CSS, detailing how each effect tricks the eye. It includes demonstrations of illusions like the Poggendorff and the Cornsweet, along with explanations of the coding techniques used to achieve them. Interactivity is emphasized, allowing users to hover over elements to reveal the true nature of the illusions.
If you do, here's more
The article presents a variety of optical illusions created using CSS, showcasing how visual perception can be easily manipulated. Each illusion is paired with a demo that allows users to interact with the visuals, revealing the tricks behind them. For example, the Poggendorff illusion demonstrates how a diagonal line appears misaligned when interrupted by a vertical bar, despite both segments being continuous. The author explains various techniques for achieving these effects, such as using CSS gradients and pseudo-elements.
Several other illusions are highlighted, such as the Cornsweet and White's illusions, which play with color perception. In the Cornsweet illusion, identical shades of gray are perceived differently due to their contrasting backgrounds. White's illusion further emphasizes this by showing that the same gray column appears darker when surrounded by black. The Wertheimer-Koffka ring and Adelson's checkerboard illusion illustrate how context and color can deceive the eye, with seemingly different colors turning out to be the same.
A notable aspect of the article is the exploration of more complex illusions like the Kanizsa square and the MΓΌller-Lyer illusion, which rely on our brain's tendency to fill in gaps or misinterpret spatial relationships. The author shares insights into the coding process for these illusions, highlighting specific CSS techniques used to create them. Each illusion not only entertains but also serves as a compelling reminder of the quirks of human visual perception.
Questions about this article
No questions yet.