Comments (0)
CSS
width: 500px;
height: 500px;
background:
radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0) 66%, rgba(255,0,0,1) 68%) 104px 190px / 95px 32px no-repeat no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0) 66%, rgba(255,0,0,1) 68%) 311px 190px / 95px 32px no-repeat no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0) 66%, rgba(228,228,228,1) 68%) 196px 190px / 118px 32px no-repeat no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0) 66%, rgba(228,228,228,1) 68%) 33px 190px / 71px 32px no-repeat no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0) 66%, rgba(228,228,228,1) 68%) 406px 190px / 71px 32px no-repeat no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, rgba(228,228,228,1) 49%, rgba(255,255,255,0) 50%) 175px -50px / 160px 240px no-repeat no-repeat, /* Top */
radial-gradient(ellipse at 50% 100%, rgba(255,0,0,1) 49%, rgba(255,255,255,0) 50%) 40px -50px / 430px 240px no-repeat no-repeat, /* Top */
radial-gradient(ellipse at 50% 100%, rgba(228,228,228,1) 49%, rgba(255,255,255,0) 50%) -65px -50px / 640px 240px no-repeat no-repeat, /* Top */
linear-gradient(90deg, rgba(255,185,69,1) 0%, 50%, rgba(198,131,23,1) 100%) 245px 183px / 17px 254px no-repeat no-repeat, /* Pole */
conic-gradient(from 0deg at 50% 50%, rgba(255,185,69,0) 34%, rgba(255,185,69,1) 35%, rgba(198,131,23,1) 65%, rgba(198,131,23,0) 66%) 299px 408px / 17px 29px no-repeat no-repeat, /* Pole */
conic-gradient(from 0deg at 50% 50%, rgba(255,185,69,0) 34%, rgba(255,185,69,1) 35%, rgba(198,131,23,1) 65%, rgba(198,131,23,0) 66%) 247px -2px / 17px 29px no-repeat no-repeat, /* Pole */
radial-gradient(circle at 50% 0%, rgba(255,185,69,0) 34%, rgba(198,131,23,1) 35%, rgba(255,185,69,1) 65%, rgba(198,131,23,0) 66%) 241px 437px / 79px 37px no-repeat no-repeat; /* Pole */Umbrella
Yoav Kadosh
This illustration was inspired by this great CSS tricks article https://css-tricks.com/drawing-images-with-css-gradients/
Colors
Views
1,006
Forks
0
Layers
12
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