GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
width: 500px;
height: 500px;
background:
radial-gradient(ellipse at 50% 100%, transparent 66%, rgb(255 0 0) 68%) 104px 190px / 95px 32px no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, transparent 66%, rgb(255 0 0) 68%) 311px 190px / 95px 32px no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, transparent 66%, rgb(228 228 228) 68%) 196px 190px / 118px 32px no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, transparent 66%, rgb(228 228 228) 68%) 33px 190px / 71px 32px no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, transparent 66%, rgb(228 228 228) 68%) 406px 190px / 71px 32px no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, rgb(228 228 228) 49.5%, transparent 49.7%) 175px -50px / 160px 240px no-repeat, /* Top */
radial-gradient(ellipse at 50% 100%, rgb(255 0 0) 49.6%, transparent 49.7%) 40px -50px / 430px 240px no-repeat, /* Top */
radial-gradient(ellipse at 50% 100%, rgb(228 228 228) 49%, transparent 49.1%) -65px -50px / 640px 240px no-repeat, /* Top */
linear-gradient(90deg, rgb(255 185 69) 0%, 50%, rgb(198 131 23) 100%) 245px 183px / 17px 254px no-repeat, /* Pole */
conic-gradient(transparent 34%, rgb(255 185 69) 35%, rgb(255 185 69) 42%, rgb(199 132 24) 57%, rgb(199 132 24) 65%, transparent 66%) 299px 408px / 17px 29px no-repeat, /* Pole */
conic-gradient(transparent 34%, rgb(255 185 69) 35%, rgb(198 131 23) 65%, transparent 66%) 247px -2px / 17px 29px no-repeat, /* Pole */
radial-gradient(circle at 50% 0, transparent 34%, rgb(198 131 23) 34.1%, rgb(255 185 69) 66%, transparent 66.1%) 241px 437px / 79px 37px no-repeat; /* Pole */
} Comments (0)
Umbrella
Yoav Kadosh
This illustration was inspired by this great CSS tricks article https://css-tricks.com/drawing-images-with-css-gradients/
Colors
Views
3,875
Code size
2.03 KB
Layers
12
<iframe
src="https://gra.dient.art/embed/gorhcsboxx"
title="Umbrella | GradientArt"
width="500"
height="500"
style="border: 0; max-width: 100%; aspect-ratio: 500 / 500; height: auto;"
loading="lazy"
></iframe>Layers (12)
Tip
radial
Tip
radial
Tip
radial
Tip
radial
Tip
radial
Top
radial
Top
radial
Top
radial
Pole
linear
Pole
conic
Pole
conic
Pole
radial
GRADIENT
.ART
css