Umbrella

Designed by
Yoav Kadosh

Keywords:

Colors:

This illustration was inspired by this great CSS tricks article https://css-tricks.com/drawing-images-with-css-gradients/

Layers
12
Views
111
Open in Editor

Layers

Tip
(radial)
Tip
(radial)
Tip
(radial)
Tip
(radial)
Tip
(radial)
Top
(radial)
Top
(radial)
Top
(radial)
Pole
(linear)
Pole
(conic)
Pole
(conic)
Pole
(radial)

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 */