Cafe Wall Illusion - CSS Optical Illusion

Code Live Demo

:root {
  --x: 18vh;
  --y: calc(var(--x) * 2 / 3);
  --hy: calc(var(--y) / 2);
  --qx: calc(var(--x) / 4);
  background:
    linear-gradient(#0000 93%, #666 0),
    conic-gradient(#fff 25%, #0000 0 75%, #000 0),
    conic-gradient(#fff 25%, #0000 0 75%, #000 0);
  background-position: 0 0, 0 0, var(--qx) var(--hy);
  background-size: var(--x) var(--hy), var(--x) var(--y), var(--x) var(--y);
}

About This Illusion

All the lines in the demo are perfectly horizontal, but they appear slanted due to the arrangement of the black and white tiles.

This is a classic optical illusion and an easy one to code in CSS. Three gradients are all that is needed to generate the effect in which the horizontal lines appear slanted, even though they are perfectly parallel.

Try This

Mouse over the demo to see the illusion in action.