GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
width: 500px;
height: 500px;
background:
linear-gradient(22deg, rgb(165 171 173) 29%, transparent 30%) 250px 111px / 100px 100px no-repeat, /* Top */
linear-gradient(-22deg, rgb(165 171 173) 29%, transparent 30%) 150px 111px / 100px 100px no-repeat, /* Top */
linear-gradient(202deg, rgb(165 171 173) 29%, transparent 30%) 150px 210px / 100px 100px no-repeat, /* Top */
linear-gradient(158deg, rgb(165 171 173) 29%, transparent 30%) 250px 210px / 100px 100px no-repeat, /* Top */
linear-gradient(202deg, transparent 29%, rgb(128 133 137) 29%, rgb(128 133 137) 69%, transparent 69%) 150px 161px / 100px 270px no-repeat, /* Left */
linear-gradient(158deg, transparent 29%, rgb(87 92 94) 29%, rgb(87 92 94) 69%, transparent 69%) 250px 161px / 100px 270px no-repeat, /* Right */
linear-gradient(158deg, transparent 29%, rgb(234 241 244) 29%, rgb(234 241 244) 57%, transparent 69%) 250px 239px / 100px 260px no-repeat, /* Glow right */
linear-gradient(202deg, transparent 29%, rgb(234 241 244) 29%, rgb(234 241 244) 57%, transparent 69%) 150px 238px / 100px 260px no-repeat, /* Glow left */
linear-gradient(rgb(183 209 217), rgb(183 209 217)) 0 0 / 500px 500px no-repeat; /* Background */
} Comments (0)
<iframe
src="https://gra.dient.art/embed/nkrro6o7pb"
title="Cube | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (9)
Top
linear
Top
linear
Top
linear
Top
linear
Left
linear
Right
linear
Glow right
linear
Glow left
linear
Background
solid
GRADIENT
.ART
css