:root {
height: 100vh;
background:
linear-gradient(#0000 calc(50% - 1px), #333 0 calc(50% + 1px), #0000 0),
linear-gradient(90deg, #0000 calc(50% - 1px), #333 0 calc(50% + 1px), #0000 0),
linear-gradient(45deg, #0000 calc(50% - 0.5px), #333 0 calc(50% + 0.5px), #0000 0) 50% 50% / 12vmin 12vmin,
linear-gradient(-45deg, #0000 calc(50% - 0.5px), #333 0 calc(50% + 0.5px), #0000 0) 50% 50% / 12vmin 12vmin,
linear-gradient(45deg, #0000 calc(50% - 2px), #fff 0 calc(50% + 2px), #0000 0) 50% 50% / 12vmin 12vmin,
linear-gradient(-45deg, #0000 calc(50% - 2px), #fff 0 calc(50% + 2px), #0000 0) 50% 50% / 12vmin 12vmin,
conic-gradient(#b2b2b2 25%, #ff9 0 50%, #fdf 0 75%, #9ff 0)
;
}
About This Illusion
The lines inside the yellow section appear blue, while the lines inside the blue section appear red... but they are all black (or very dark gray). The white contour creates the illusion of color. Mouse over to remove the contour and the lines will clearly appear black.
This illusion is easy to code with CSS, using just a handful of linear and conic gradients. But it looks better in larger screens in light mode.
Try This
- Mouse over the demo to see the illusion in action.