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.

Fichamento

#

• Reúne uma coleção de ilusões ópticas feitas com CSS e HTML, com demos que podem ser observadas passando o mouse para revelar o efeito ou parar animações.
• Mostra ilusões de alinhamento e perspectiva, como Poggendorff, Café Wall, Penrose Triangle, Ponzo, T e Müller-Lyer.
• Explica ilusões de cor e brilho em que partes iguais parecem diferentes, como induced gradients, Cornsweet, White’s illusion, Wertheimer-Koffka Ring e Adelson’s illusion.
• Apresenta efeitos em que o cérebro completa formas que não estão desenhadas, como Kanizsa Square, Ehrenstein’s Illusion e Neon-Color-Spreading.
• Inclui ilusões ligadas à percepção de movimento, como Expanding Hole, Rotating Snakes, Appearing Dots, Disappearing Dots, Ouchi, Enigma e Waves.
• Reúne também animações em que o movimento real cria a ilusão, como Animated Ebbinghaus, Psychokinematic Tower, Reverse Spoke, Motion Binding, Troxler Fading, Pinna-Brelstaff e Motion Inversion.
• Menciona que parte das ideias veio de duas referências externas: Patrick Pester no Live Science e Michael Bach em 154 Visual Phenomena & Optical Illusions.