GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
--background: rgb(48 7 6);
--weave-angle: 145;
--string-color: rgb(176 62 63);
--string-thickness: 50;
width: 500px;
height: 500px;
background:
repeating-linear-gradient(calc((180 - var(--weave-angle)) * 1deg), transparent 0%, calc(((100 - var(--string-thickness)) / 2) / 15 * 1%), var(--string-color) calc(((100 - var(--string-thickness)) / 2) / 15 * 1%), var(--string-color) calc((100 - ((100 - var(--string-thickness)) / 2)) / 15 * 1%), calc((100 - ((100 - var(--string-thickness)) / 2)) / 15 * 1%), transparent 6.67%, transparent 6.67%) 0 0 / 500px 500px no-repeat, /* New Gradient (copy) */
linear-gradient(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.4)) 0 0 / 100px 100px, /* New Background */
repeating-linear-gradient(calc(var(--weave-angle) * 1deg), transparent 0%, calc(((100 - var(--string-thickness)) / 2) / 15 * 1%), var(--string-color) calc(((100 - var(--string-thickness)) / 2) / 15 * 1%), var(--string-color) calc((100 - ((100 - var(--string-thickness)) / 2)) / 15 * 1%), calc((100 - ((100 - var(--string-thickness)) / 2)) / 15 * 1%), transparent 6.67%, transparent 6.67%) 1px 0 / 500px 500px no-repeat, /* New Gradient */
linear-gradient(var(--background), var(--background)) 0 0 / 500px 500px no-repeat; /* New Gradient */
} 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/ol6ynyvqb1"
title="Net | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (4)
New Gradient (copy)
linear
New Background
solid
New Gradient
linear
New Gradient
solid
GRADIENT
.ART
css