Comments (0)
CSS
width: 500px;
height: 500px;
background:
radial-gradient(ellipse at 50% 100%, rgb(255 255 255 / 0) 66%, rgb(255 0 0 / 1) 68%) 104px 190px / 95px 32px no-repeat no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, rgb(255 255 255 / 0) 66%, rgb(255 0 0 / 1) 68%) 311px 190px / 95px 32px no-repeat no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, rgb(255 255 255 / 0) 66%, rgb(228 228 228 / 1) 68%) 196px 190px / 118px 32px no-repeat no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, rgb(255 255 255 / 0) 66%, rgb(228 228 228 / 1) 68%) 33px 190px / 71px 32px no-repeat no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, rgb(255 255 255 / 0) 66%, rgb(228 228 228 / 1) 68%) 406px 190px / 71px 32px no-repeat no-repeat, /* Tip */
radial-gradient(ellipse at 50% 100%, rgb(228 228 228 / 1) 49.5%, rgb(255 255 255 / 0) 49.7%) 175px -50px / 160px 240px no-repeat no-repeat, /* Top */
radial-gradient(ellipse at 50% 100%, rgb(255 0 0 / 1) 49.6%, rgb(255 255 255 / 0) 49.7%) 40px -50px / 430px 240px no-repeat no-repeat, /* Top */
radial-gradient(ellipse at 50% 100%, rgb(228 228 228 / 1) 49%, rgb(255 255 255 / 0) 49.1%) -65px -50px / 640px 240px no-repeat no-repeat, /* Top */
linear-gradient(90deg, rgb(255 185 69 / 1) 0%, 50%, rgb(198 131 23 / 1) 100%) 245px 183px / 17px 254px no-repeat no-repeat, /* Pole */
conic-gradient(from 0deg at 50% 50%, rgb(255 185 69 / 0) 34%, rgb(255 185 69 / 1) 35%, rgb(255 185 69 / 1) 42%, rgb(199 132 24 / 1) 57%, rgb(199 132 24 / 1) 65%, rgb(198 131 23 / 0) 66%) 299px 408px / 17px 29px no-repeat no-repeat, /* Pole */
conic-gradient(from 0deg at 50% 50%, rgb(255 185 69 / 0) 34%, rgb(255 185 69 / 1) 35%, rgb(198 131 23 / 1) 65%, rgb(198 131 23 / 0) 66%) 247px -2px / 17px 29px no-repeat no-repeat, /* Pole */
radial-gradient(circle at 50% 0%, rgb(255 185 69 / 0) 34%, rgb(198 131 23 / 1) 34.1%, rgb(255 185 69 / 1) 66%, rgb(198 131 23 / 0) 66.1%) 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
2,480
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