Earth 🌍

Designed by
Yoav Kadosh

Keywords:

Colors:

Our beautiful planet in a CSS gradient version

Layers
14
Views
2467
Open in Editor

Layers

Mask
(radial)
Shade
(radial)
Shade
(radial)
Shine
(radial)
Shine
(radial)
Land
(radial)
Land
(radial)
Land
(radial)
Land
(radial)
Land
(radial)
Land
(radial)
Land
(radial)
Land
(radial)
Water
(radial)

CSS

width: 500px;
height: 500px;
background:
radial-gradient(ellipse at 50% 50%, rgba(69,255,144,0) 0%, 50%, rgba(42,100,151) 50%, 52.94%, rgba(13,42,66,1) 100%) 0px 0px / 500px 500px no-repeat no-repeat, /* Mask */
radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.41) 0%, 24.72%, rgba(0,0,0,0) 65.2%) 80px 79px / 355px 355px no-repeat no-repeat, /* Shade */
radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.3) 0%, 50%, rgba(0,0,0,0) 71.29%) 142px 148px / 291px 289px no-repeat no-repeat, /* Shade */
radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.28) 0%, 14.69%, rgba(255,255,255,0) 68.07%) 98px 96px / 158px 162px no-repeat no-repeat, /* Shine */
radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0) 0%, 65.56%, rgba(255,255,255,0.49) 68.07%) 65px 68px / 374px 371px no-repeat no-repeat, /* Shine */
radial-gradient(ellipse at 0% 100%, rgba(0,224,90,1) 0%, 50%, rgba(69,168,255,0) 54.81%) 71px 259px / 104px 140px no-repeat no-repeat, /* Land */
radial-gradient(ellipse at 50% 50%, rgba(0,224,90,1) 0%, 50%, rgba(69,168,255,0) 54.81%) 228px 94px / 233px 88px no-repeat no-repeat, /* Land */
radial-gradient(ellipse at 50% 50%, rgba(0,224,90,1) 0%, 50%, rgba(69,168,255,0) 54.81%) 168px 72px / 233px 88px no-repeat no-repeat, /* Land */
radial-gradient(ellipse at 100% 0%, rgba(0,224,90,1) 0%, 50%, rgba(69,168,255,0) 54.81%) 101px 258px / 117px 71px no-repeat no-repeat, /* Land */
radial-gradient(ellipse at 0% 0%, rgba(0,224,90,1) 0%, 50%, rgba(69,168,255,0) 54.81%) 249px 258px / 117px 170px no-repeat no-repeat, /* Land */
radial-gradient(ellipse at 100% 0%, rgba(0,224,90,1) 0%, 50%, rgba(69,168,255,0) 54.81%) 172px 258px / 77px 170px no-repeat no-repeat, /* Land */
radial-gradient(ellipse at 100% 100%, rgba(0,224,90,1) 0%, 50%, rgba(69,168,255,0) 54.81%) 101px 173px / 117px 85px no-repeat no-repeat, /* Land */
radial-gradient(ellipse at 0% 100%, rgba(0,224,90,1) 0%, 50%, rgba(69,168,255,0) 54.81%) 218px 173px / 160px 85px no-repeat no-repeat, /* Land */
radial-gradient(ellipse at 50% 50%, rgba(69,117,255,1) 0%, 50%, rgba(42,100,151) 100%) 69px 67px / 361px 364px no-repeat no-repeat; /* Water */