<p>Pure CSS background pattern. Can you figure out how it was made before checking the code? Can you reduce the number of gradients? Let me know!</p>
$d: 6.25em;
html {
--g:
radial-gradient(closest-side,
#fff calc(100% - 1px), #000);
background:
repeating-conic-gradient(from 45deg,
#fff 0% 25%, #000 0% 50%) .5*$d 0,
linear-gradient(#a1c181 0 0),
var(--g), var(--g) .5*$d .5*$d;
background-size: $d $d;
background-blend-mode: difference, darken;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.