GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
width: 800px;
height: 800px;
background:
radial-gradient(ellipse, rgb(242 78 30) 70%, transparent 70.5%) 193px 112px / 200px 200px no-repeat, /* Red */
linear-gradient(rgb(242 78 30), rgb(242 78 30)) 296px 113px / 98px 198px no-repeat, /* Red */
radial-gradient(ellipse, rgb(229 102 88) 70%, transparent 70.5%) 394px 112px / 200px 200px no-repeat, /* Pink */
linear-gradient(rgb(229 102 88), rgb(229 102 88)) 394px 113px / 98px 198px no-repeat, /* Pink */
radial-gradient(ellipse, rgb(22 169 228) 70%, transparent 70.5%) 393px 310px / 200px 200px no-repeat, /* Blue */
radial-gradient(ellipse, rgb(145 80 229) 70%, transparent 70.5%) 193px 310px / 200px 200px no-repeat, /* Purple */
linear-gradient(rgb(145 80 229), rgb(145 80 229)) 298px 311px / 96px 198px no-repeat, /* Purple */
linear-gradient(rgb(1 186 118), rgb(1 186 118)) 292px 509px / 102px 100px no-repeat, /* Green */
radial-gradient(ellipse, rgb(1 186 118) 70%, transparent 70.5%) 195px 508px / 200px 200px no-repeat; /* Green */
} Comments (0)
<iframe
src="https://gra.dient.art/embed/a53kztxp68"
title="Figma Logo | GradientArt"
width="800"
height="800"
style="border: 0; max-width: 100%; aspect-ratio: 800 / 800; height: auto;"
loading="lazy"
></iframe>Layers (9)
Red
radial
Red
solid
Pink
radial
Pink
solid
Blue
radial
Purple
radial
Purple
solid
Green
solid
Green
radial
GRADIENT
.ART
css