5 CSS Optical Illusions

css 1 min read

This updated collection explores the intersection of cognitive psychology and modern UI design. Optical illusions are not merely novelties; they demonstrate the profound capabilities of browser rendering to manipulate human perception. Using these curated snippets, developers can create depth, motion, and perspective without the overhead of heavy image assets, making them ideal for high-impact landing pages and creative portfolios.

Technically, these effects leverage advanced CSS properties such as repeating-conic-gradient, mix-blend-mode, and clip-path. By utilizing HTML structure for pattern repetition, these snippets achieve complex visual phenomena - like Moiré effects or impossible geometry - while maintaining layout stability. These solutions focus on hardware acceleration through transform and opacity properties to ensure smooth 60fps performance without taxing the Main Thread.

Every free demo in this library is fully responsive and cross-browser compatible. You can easily download the source code or experiment with the visual logic directly on CodePen. These snippets are ready for production use, ensuring your project remains performant and visually striking.

Black and white optical illusion geometric pattern generated with pure CSS gradients

Optical Illusion CSS Background Pattern

demo & code

This is an Optical Illusion CSS Background Pattern. It generates a complex, interlocking geometric tessellation using only mathematical gradient overlays. Its function is to provide a visually striking, lightweight background texture without requiring external image assets.

Level: Intermediate
Browser Support [As of Mar 2026]: Chrome 69+, Edge 79+, Firefox 83+, Safari 12.1+
Black and white optical illusion pattern featuring a central circle that appears to pulse against a striped background, created with pure CSS gradients

Pulsing Circle Optical Illusion

demo & code

This is a Pulsing Circle Optical Illusion. It generates a static, high-contrast geometric pattern that exploits peripheral vision to create a false sense of motion. Its function is to serve as a lightweight, visually arresting background or artistic centerpiece using only a handful of CSS properties and zero JavaScript.

Level: Beginner
Browser Support [As of Mar 2026]: Chrome 69+, Edge 79+, Firefox 83+, Safari 12.1+
Two colored boxes (yellow and blue) moving horizontally across a black and white striped background, demonstrating the stepping feet illusion.

Stepping Feet Optical Illusion

demo & code

This is the Stepping Feet Optical Illusion. It demonstrates how high-contrast patterns interfere with human motion perception. Two colored blocks move at identical, constant speeds, yet appear to stagger and “step” like feet. A hover interaction removes the background grid to expose the mathematical reality of their parallel movement.

Level: Intermediate
Browser Support [As of Mar 2026]: Chrome 105+, Edge 105+, Firefox 121+, Safari 16.4+

Checkbox Illusionexternal link

Checkbox illusion with optical pattern. Repeating conic gradient background creates grid. Pseudo-elements with layered gradients and mix-blend-mode: difference shift position on toggle, creating 3D shape motion effect. clip-path forms diamond mask.

// Related Hubs

CSS Background Patterns Create intricate, scalable background patterns …
→
CSS Gradient Examples CSS Gradient Examples collection for performant UI …
→