GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
--line-color: rgb(27 182 224);
--background: rgb(255 255 255);
--square-size: 25;
--line-width: 2;
width: 200px;
height: 200px;
background:
linear-gradient(90deg, var(--line-color) calc(var(--line-width) / 1 * 1%), transparent calc(var(--line-width) / 1 * 1%), transparent 98%, var(--line-color) 98%) 0 0 / calc(var(--square-size) * 1px) calc(var(--square-size) * 1px), /* Horizontal Lines */
linear-gradient(0deg, var(--line-color) calc(var(--line-width) / 1 * 1%), var(--background) calc(var(--line-width) / 1 * 1%), var(--background) 98%, var(--line-color) 98%) 0 0 / calc(var(--square-size) * 1px) calc(var(--square-size) * 1px); /* Vertical Lines */
} Comments (0)
Customize
Try different values. Your changes stay in this preview and never change the saved project.
#
#
<iframe
src="https://gra.dient.art/embed/glpwch97sn"
title="Grid | GradientArt"
width="200"
height="200"
style="border: 0; max-width: 100%; aspect-ratio: 200 / 200; height: auto;"
loading="lazy"
></iframe>Layers (2)
Horizontal Lines
linear
Vertical Lines
linear
GRADIENT
.ART
css