<div id="root"></div>#root {
--dark-color: rgb(60 93 120);
--light-color: rgb(255 255 255);
--square-size: 100;
width: 500px;
height: 500px;
background:
conic-gradient(var(--light-color) 0%, 25%, var(--dark-color) 25%, 50%, var(--light-color) 50%, 75%, var(--dark-color) 75%) 0 0 / calc(var(--square-size) * 1px) calc(var(--square-size) * 1px); /* Checkers */
}Try different values. Your changes stay in this preview and never change the saved project.
<iframe
src="https://gra.dient.art/embed/b14o5f7qx0"
title="Checkers ♟ | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>