GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
width: 500px;
height: 500px;
background:
radial-gradient(ellipse, rgb(250 199 219) 0%, rgb(255 182 213) 40%, 50%, transparent 56%) 224px 46px / 148px 120px no-repeat, /* SakuraD1 */
radial-gradient(ellipse, rgb(250 199 219) 0%, rgb(255 182 213) 40%, 50%, transparent 56%) 100px 103px / 148px 120px no-repeat, /* SakuraD2 */
radial-gradient(ellipse, rgb(255 181 195) 0%, 50%, transparent 56%) 200px 152px / 168px 120px no-repeat, /* SakuraB7 */
radial-gradient(ellipse, rgb(255 181 195) 0%, 50%, transparent 56%) 264px 92px / 168px 120px no-repeat, /* SakuraB3 */
radial-gradient(ellipse, rgb(255 181 195) 0%, 50%, transparent 56%) 56px 119px / 148px 120px no-repeat, /* SakuraB5 */
radial-gradient(ellipse, rgb(255 181 195) 0%, 50%, transparent 56%) 142px 29px / 148px 120px no-repeat, /* SakuraB4 */
radial-gradient(ellipse, rgb(255 181 195) 0%, 50%, transparent 56%) 77px 202px / 118px 80px no-repeat, /* SakuraB2 */
radial-gradient(ellipse, rgb(255 181 195) 0%, 50%, transparent 56%) 337px 189px / 96px 94px no-repeat, /* SakuraB1 */
radial-gradient(ellipse, rgb(243 133 158) 0%, 50%, transparent 56%) 183px 93px / 136px 120px no-repeat, /* SakuraA3 */
radial-gradient(ellipse, rgb(243 133 158) 0%, 50%, transparent 56%) 283px 155px / 136px 120px no-repeat, /* SakuraA4 */
radial-gradient(ellipse, rgb(243 133 158) 0%, 50%, transparent 56%) 130px 159px / 136px 120px no-repeat, /* SakuraA2 */
radial-gradient(ellipse, rgb(243 133 158) 0%, 50%, transparent 56%) 103px 66px / 136px 120px no-repeat, /* SakuraA1 */
radial-gradient(ellipse, rgb(204 145 86) 0%, rgb(99 41 40 / 0.22) 20%, 50%, transparent 56%) 225px 284px / 18px 43px no-repeat, /* Trunk5-2 */
radial-gradient(ellipse at 50% 100%, rgb(99 41 40) 0%, 50%, transparent 56%) 214px 159px / 60px 206px no-repeat, /* Trunk2 */
radial-gradient(ellipse at 50% 100%, rgb(204 145 86) 0%, 50%, transparent 56%) 209px 161px / 70.99431610107422px 202.97535705566406px no-repeat, /* Trunk3 */
radial-gradient(ellipse, rgb(99 41 40) 0%, rgb(99 41 40) 25%, 50%, transparent 56%) 175px 351px / 142px 34px no-repeat, /* Trunk1 */
radial-gradient(ellipse, rgb(203 145 86) 0%, 50%, transparent 56%) 148px 344px / 196px 54px no-repeat, /* Trunk4 */
radial-gradient(ellipse at 50% 100%, rgb(142 255 69) 0%, 50%, transparent 56%) -116px 287px / 719px 215px no-repeat, /* Grass */
radial-gradient(ellipse at 50% 100%, rgb(69 255 144) 0%, 50%, transparent 56%) -149px 279px / 792px 223px no-repeat, /* Earth */
linear-gradient(0deg, rgb(255 186 201) 0%, 50%, rgb(69 168 255) 100%) 0 0 / 500px 429px no-repeat; /* Sky */
} Comments (1)
Yoav Kadosh
4 years ago
Beautiful!
<iframe
src="https://gra.dient.art/embed/y6w2uk0k0m"
title="Sakura Tree | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (20)
SakuraD1
radial
SakuraD2
radial
SakuraB7
radial
SakuraB3
radial
SakuraB5
radial
SakuraB4
radial
SakuraB2
radial
SakuraB1
radial
SakuraA3
radial
SakuraA4
radial
SakuraA2
radial
SakuraA1
radial
Trunk5-2
radial
Trunk2
radial
Trunk3
radial
Trunk1
radial
Trunk4
radial
Grass
radial
Earth
radial
Sky
linear
GRADIENT
.ART
css