CSS Optical Illusions: 50+ Visual Illusions Built with Pure CSS and HTML

A collection of optical illusions built with CSS and HTML, grouped by the visual trick they use. Many demos rely on gradients, pseudo-elements, blend modes, and motion to make flat shapes seem misaligned, colored, moving, or three-dimensional.

Reading notes

#

• Reúne uma coleção de ilusões ópticas feitas com CSS e HTML, com demos that can be observed by hovering the mouse to reveal the effect or stop animations.
• Shows illusions of alignment and perspective, such as Poggendorff, Café Wall, Penrose Triangle, Ponzo, T and Müller-Lyer.
• Explains color and brightness illusions in which equal parts seem different, such as induced gradients, Cornsweet, White’s illusion, Wertheimer-Koffka Ring and Adelson’s illusion.
• Presents effects in which the brain completes forms that are not drawn, such as Kanizsa Square, Ehrenstein’s Illusion and Neon-Color-Spreading.
• Includes illusions related to the perception of motion, such as Expanding Hole, Rotating Snakes, Appearing Dots, Disappearing Dots, Ouchi, Enigma and Waves.
• Also gathers animations in which real motion creates the illusion, such as Animated Ebbinghaus, Psychokinematic Tower, Reverse Spoke, Motion Binding, Troxler Fading, Pinna-Brelstaff and Motion Inversion.
• Mentions that part of the ideas came from two external references: Patrick Pester at Live Science and Michael Bach in 154 Visual Phenomena & Optical Illusions.