<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 {
				#fff calc(100% - 1px), #000);
		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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.