CSS Optical Illusions

A comprehensive collection of 45+ optical illusions recreated using CSS and HTML, ranging from classic effects like the Poggendorff and Müller-Lyer illusions to motion-based phenomena. The collection demonstrates advanced CSS techniques including gradients, pseudo-elements, blend modes, and animations to create perceptual

Jan 22•16m read time• From alvaromontoro.com

Table of contents

1 - Poggendorff Illusions 2 - Induced Gradients 3 - Cornsweet Illusion 4 - White's Illusion 5 - Wertheimer-Koffka Ring 6 - Adelson's Illusion 7 - Asahi illusion of Brightness 8 - Color Spheres 9 - Colors from Contour 10 - Curvature Blindness 11 - Cafe Wall 12 - Penrose Triangle 13 - Ebbinghaus Illusion 14 - Kanizsa Square 15 - Ehrenstein's Illusion 16 - Neon-Color-Spreading Illusion 17 - Hering and Wundt Illusions 18 - Ponzo Illusion 19 - T Illusion 20 - Müller-Lyer Illusion 21 - Tilted Table Illusion 22 - Parallel Lines 23 - Expanding Hole 24 - Rotating Snakes 25 - Appearing Dots 26 - Disappearing Dots 27 - Ouchi Illusion 28 - Orthogonal Dotted Lines Sway 29 - Enigma 30 - Waves 31 - Animated Ebbinghaus Illusion 32 - Psychokinematic Tower 33 - Color Fan 34 - Reverse Spoke Illusion 35 - Motion Binding 36 - Mainz-Linez Illusion 37 - Waddling Colors 38 - Dotted-Line Motion 39 - Contrast Asynchrony 40 - Breathing Square 41 - Troxler Fading 42 - Pinna-Brelstaff Illusion 43 - Palisade 44 - Alternative Motion 45 - Motion Inversion