A new collection demonstrates how to recreate classic visual tricks using pure CSS. The article covers 20 illusions like the Poggendorff, Cornsweet, and Müller-Lyer effects. Each demo uses CSS gradients, pseudo-elements, and mix-blend-mode to manipulate perception. The author, Alvaro Montoro, provides interactive CodePen examples where hovering reveals the trick.

These experiments highlight the power of modern CSS for creating complex, interactive visuals without JavaScript. By leveraging gradients and blending modes, developers can build engaging user experiences. The techniques are practical for UI designers exploring visual perception in web layouts. The collection serves as both a learning resource and a reminder of how our brains process visual information.

The project underscores CSS's expanding role beyond simple styling into dynamic graphics. Montoro's work follows a tradition of web developers using code to explore cognitive science. Future iterations could integrate these effects into animation libraries or accessibility tools. For now, the demos offer a fun, technical look at the intersection of frontend engineering and psychology.