Optical Illusion CSS Background Pattern

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.

Specs

• Weight: < 1 KB. Zero dependencies.
• Performance: High. Handled entirely by the browser’s native CSS rendering engine.
• Theming / Customization: The scale is controlled by a single --size variable. Colors can be inverted or swapped by updating the hex values (#fff, #000) within the gradient declarations.
• Responsiveness: Native. The pattern naturally repeats and fills any viewport dimension infinitely.
• Graceful Degradation: If conic-gradient is unsupported by legacy browsers, the pattern safely falls back to displaying only the diagonal stripes of the repeating-linear-gradient.

Anatomy

The structure is a masterclass in minimalism, requiring no additional DOM nodes.

• HTML (The Skeleton): None required. The styles can be applied directly to the body or any container div.
• CSS (The Skin): A single CSS rule block. It leverages a CSS custom property for sizing (--size) and the background-image property to stack two distinct gradients on top of each other.
• JS (The Nervous System): Absent.

Logic

The effect relies entirely on “Gradient Compositing”.

background-image:
  conic-gradient(#fff 25%, #0000 0 50%, #000 0 75%, #0000 0),
  repeating-linear-gradient(
    135deg,
    #fff 0 12.5%, #000 0 25%, #fff 0 37.5%, #000 0 62.5%
  );

The rendering engine processes backgrounds from top to bottom. The top layer is a conic-gradient that creates a sharp, quadrant-based mask with alternating solid colors and transparent sections (#0000). The bottom layer is a repeating-linear-gradient drawing continuous 135-degree diagonal stripes. When the sharp, 90-degree corners of the conic gradient overlap the angled lines of the layer beneath it, the visual output tricks human perception into seeing interconnected, three-dimensional geometric blocks.

Feel

Sharp and hypnotic. The pattern possesses a stark mathematical perfection. Because it is rendered programmatically via CSS rather than relying on a rasterized image grid, the edges remain infinitely crisp regardless of monitor resolution or zoom level. It transforms a blank canvas into a structured, tactile surface with almost zero bandwidth cost.