Feb 15, 2026 12: 00: 00
An optical idea is a type of fantasy that manifests in the physical system, causing something to look that isn’t there or isn’t in reality. There are a wide range of optical illusion styles known, and” CSS Optical Illusions” is a site where you can use CSS to perform various optical illusions.
CSS Optical Illusions
Poggendorff’s fantasy
is a type of geometric optical illusion in which, when a diagonal line is partially hidden in an object such as a rectangle, the separated line segments appear misaligned. In the embedded CodePen below, hovering your mouse cursor (or tapping on a smartphone) will reveal the hidden diagonal line, allowing you to experience the Poggendorff’s fantasy. By clicking the ‘CSS’ button, you can see that this demo implements the diagonal line and vertical bar using only the CSS ::before and ::after pseudo-elements.
See Alvaro Montoro’s ( ) Pen CSS Optical Illusion: Poggendorff Illusion ( I ) on .
More intricate designs can be achieved with more intricate patterns by combining numerous horizontal and vertical bars. Two variations defined within the body, which intersect at a 70-degree perspective, are only used in this demonstration, which only applies to the body.
See Alvaro Montoro’s Pen CSS Optical Illusion: Poggendorff Illusion ( II ) on .
guiding curve
The three plates ( two vertical bars on either side and one parallel club in the middle ) are all the same black with a guided curve, but the history curve creates an optical illusion that they appear to be different colors. Even though it is a solid color, the parallel bar in the middle, in particular, appears to have a curve. When you examine the CSS, you can see that every bar has the same good color.
See Alvaro Montoro’s ( ) Pen on .
The center bar appears to be a curve in the more complex video below, but when you hover your mouse over it, it obscures the background and reveals that it is really a solid color.
Discover Alvaro Montoro’s Pen on .
Colored circle
In the video below, it appears as though there are red, blue, and green circles, but they are all the exact shade of gray. The history vanishes when you hover your mouse over them, and you can tell that they are really black. This visual idea is comparable to the Munker or White idea.
See Alvaro Montoro’s ( ) Pen on .
Curvature myopia
Horizontal flowing lines are depicted in the video below. The lower wavy line appears to be made up of really twisted lines, while the top wavy line appears to be composed of somewhat straight lines. However, both lines really have the same curvature, which can be confirmed by hovering the mouse over them. Curvature blindness is an optical illusion that is known as ( PDF file ). The Wavy Shape Generator’s CSS execution for the flowing lines was allegedly used.
See Alvaro Montoro’s ( ) Pen on .
Cafe Wall obnoxie
is a classic optical illusion in which the boundaries of a tiled pattern appear to be tilted. In the demo below, hovering your mouse over the illusion reveals that the tile boundaries are actually horizontal. While the demo may appear complex, the implementation uses only three basic CSS elements:
See Alvaro Montoro’s ( ) Pen on .
idea of Ponzo
is an optical illusion that uses a background that creates a sense of depth and perspective, causing figures of the same size to appear to be different sizes. In the demo below, two yellow line segments lined up one above the other are the same length, but the top line appears to be longer. You can confirm that the two line segments are the same length by hovering your mouse. To create the demo, a 3D rotation was applied using function in CSS, technically achieving a realistic perspective.
See Alvaro Montoro’s Pen on ( ).
Vertical-horizontal fessiness
is when vertical and horizontal lines of the same length appear to be different lengths. In the demo below, the vertical and horizontal lines of the T-shaped shape are the same length, but the vertical lines appear longer. There is no animation when hovering, so CSS implementation is very simple.
See Alvaro Montoro’s Pen on ( ).
Müller-Lyer ilusion
, a classic optical illusion, causes line segments of the same length to appear to be different lengths. When you hover your mouse over the illusion, the extra lines extending from the line segments disappear, revealing that the two line segments are the same length. In terms of CSS coding, both shapes are made up of pseudo-elements, and the direction of the arrow-shaped edges is changed using ::before and ::after.
See Alvaro Montoro’s ( ) codepen illusion Pen CSS Optical Illusions: Müller-Lyer.
Color enthusiast
A CSS animated green and red fans are shown in the demo below. The green circle’s edges may appear dark green or brown if you look at the black dot in the center, but if you turn your head away from it and look at the green circle, you’ll see that it’s a uniform color.
See Alvaro Montoro’s ( ) codepen Optical Illusion: Color Fan for Pen.
Breathing Square
The CSS animation in the demo below creates an optical illusion involving . A central blue rectangle appears to expand and contract repeatedly when it rotates behind four green rectangles. The four green rectangles will be moved by hovering your mouse over it, while the central blue rectangle is simply rotating.
See Alvaro Montoro’s ( ) Pen on .
If you’re interested in using CSS and optical illusions, make sure to check out” CSS Optical Illusions.” In addition to the above, it also provides demos of various other optical illusions.