CSS Optical Illusions
2 months ago
- #CSS-effects
- #visual-perception
- #optical-illusions
- Poggendorff Illusion: Diagonal lines interrupted by vertical bars appear misaligned.
- Induced Gradients: Flat gray bars appear to have gradients when placed over actual gradients.
- Cornsweet Illusion: Identical colors appear different due to surrounding contrast.
- White's Illusion: Gray columns appear different shades based on surrounding colors.
- Wertheimer-Koffka Ring: A uniformly colored ring appears different over black and white backgrounds.
- Adelson's Illusion: Checkerboard tiles of the same color appear different due to shadows.
- Asahi Illusion: A white circle appears brighter due to surrounding patterns.
- Color Spheres: Gray circles appear colored due to overlapping lines.
- Colors from Contour: Black lines appear colored due to surrounding white contours.
- Curvature Blindness: Wavy lines appear straighter or more curved based on color changes.
- Cafe Wall: Horizontal lines appear slanted due to gradient backgrounds.
- Penrose Triangle: An impossible shape that contradicts spatial perception.
- Ebbinghaus Illusion: Identical circles appear different sizes due to surrounding elements.
- Kanizsa Square: Pac-Man shapes create the illusion of a white square.
- Ehrenstein's Illusion: Crosses create the illusion of a non-existent disc.
- Neon-Color-Spreading Illusion: Concentric circles create the illusion of a central patterned circle.
- Hering and Wundt Illusions: Straight lines appear curved due to perspective.
- Ponzo Illusion: Identical lines appear different lengths due to perspective.
- T Illusion: Identical lines appear different lengths due to orientation.
- Müller-Lyer Illusion: Lines with inward or outward edges appear different lengths.
- Tilted Table Illusion: Parallel rectangles appear tilted due to diagonal lines.
- Parallel Lines: Black lines appear non-parallel due to crossing bars.
- Expanding Hole: A static black hole appears to expand.
- Rotating Snakes: Peripheral discs appear to rotate.
- Appearing Dots: White dots make adjacent dots appear black.
- Disappearing Dots: Focusing on one dot makes others vanish.
- Ouchi Illusion: A static pattern appears to move sideways.
- Orthogonal Dotted Lines Sway: Central area appears to slide and sway.
- Enigma: Concentric rings appear to spin or scintillate.
- Waves: Static image appears to have wave-like motion.
- Animated Ebbinghaus Illusion: Animated version of the Ebbinghaus effect.
- Psychokinematic Tower: A 2D image appears to spin in 3D.
- Color Fan: A fan-shaped gradient appears to develop a border.
- Reverse Spoke Illusion: Spokes appear to rotate opposite to the background.
- Motion Binding: A single shape appears to move in two directions.
- Mainz-Linez Illusion: Dots appear to zigzag when focusing on crosses.
- Waddling Colors: Boxes appear to move at different speeds.
- Dotted-Line Motion: Dashed lines appear to move closer or farther apart.
- Contrast Asynchrony: Dots appear to jump due to alternating backgrounds.
- Breathing Square: A rotating square appears to grow and shrink.
- Troxler Fading: Missing dots appear to 'eat' surrounding dots.
- Pinna-Brelstaff Illusion: A moving dot makes the background appear to shift.
- Palisade: Straight radii appear to curve when viewed through a palisade.
- Alternative Motion: Dots appear to move in different directions.
- Motion Inversion: Identical animations appear to move differently.