Comments (1)
Yoav Kadosh
Yoav Kadosh
8 months ago

This is amazing! I love the high repeat count trick you used for creating the stars ✨

CSS
width: 750px; height: 750px; background: radial-gradient(ellipse at 50% 50%, rgba(150,193,214,1) 0%, rgba(26,234,225,1) 70%, rgba(69,168,255,0) 70%) 30px 187px / 32px 32px no-repeat no-repeat, /* Uranus */ radial-gradient(ellipse at 50% 50%, rgba(145,77,3,1) 0%, rgba(176,133,88,1) 70%, rgba(69,168,255,0) 70%) 614px 170px / 35px 35px no-repeat no-repeat, /* Saturn */ radial-gradient(ellipse at 50% 50%, rgba(212,8,8,1) 0%, rgba(235,130,19,1) 70%, rgba(69,168,255,0) 70%) 321px 619px / 50px 50px no-repeat no-repeat, /* Jupiter */ radial-gradient(ellipse at 50% 50%, rgba(240,31,76,1) 0%, rgba(212,8,8,1) 70%, rgba(69,168,255,0) 70%) 572px 300px / 23px 23px no-repeat no-repeat, /* Mars */ radial-gradient(ellipse at 50% 50%, rgba(63,141,209,1) 0%, rgba(78,81,181,1) 70%, rgba(69,168,255,0) 70%) 326px 156px / 25px 25px no-repeat no-repeat, /* Earth */ radial-gradient(ellipse at 50% 50%, rgba(212,169,42,1) 0%, rgba(232,208,137,1) 70%, rgba(69,168,255,0) 70%) 236px 370px / 30px 30px no-repeat no-repeat, /* Venus */ radial-gradient(ellipse at 50% 50%, rgba(112,88,35,1) 0%, rgba(59,163,33,1) 70%, rgba(69,168,255,0) 70%) 400px 300px / 20px 20px no-repeat no-repeat, /* Mercury */ radial-gradient(ellipse at 50% 50%, rgba(246,255,0,1) 0%, rgba(255,69,69,1) 70%, rgba(69,168,255,0) 70%) 325px 325px / 100px 100px no-repeat no-repeat, /* Sun */ radial-gradient(ellipse at 50% 50%, rgba(0,21,255,0) 0%, rgba(0,21,255,0) 69%, rgba(255,255,255,0.49) 69.5%, rgba(255,255,255,0.8) 70%, rgba(69,168,255,0) 70%) 300px 300px / 150px 150px no-repeat no-repeat, /* Orbit-2 */ radial-gradient(ellipse at 50% 50%, rgba(0,21,255,0) 0%, rgba(0,21,255,0) 69%, rgba(255,255,255,0.49) 69.5%, rgba(255,255,255,0.8) 70%, rgba(69,168,255,0) 70%) 250px 250px / 250px 250px no-repeat no-repeat, /* Orbit-3 */ radial-gradient(ellipse at 50% 50%, rgba(0,21,255,0) 0%, rgba(0,21,255,0) 69%, rgba(255,255,255,0.49) 69.5%, rgba(255,255,255,0.8) 70%, rgba(69,168,255,0) 70%) 200px 200px / 350px 350px no-repeat no-repeat, /* Orbit-4 */ radial-gradient(ellipse at 50% 50%, rgba(0,21,255,0) 0%, rgba(0,21,255,0) 69%, rgba(255,255,255,0.49) 69.5%, rgba(255,255,255,0.8) 70%, rgba(69,168,255,0) 70%) 150px 160px / 450px 450px no-repeat no-repeat, /* Orbit-5 */ radial-gradient(ellipse at 50% 50%, rgba(0,21,255,0) 0%, rgba(0,21,255,0) 69%, rgba(255,255,255,0.49) 69.5%, rgba(255,255,255,0.8) 70%, rgba(69,168,255,0) 70%) 100px 100px / 550px 550px no-repeat no-repeat, /* Orbit-6 */ radial-gradient(ellipse at 50% 50%, rgba(0,21,255,0) 0%, rgba(0,21,255,0) 69%, rgba(255,255,255,0.49) 69.5%, rgba(255,255,255,0.8) 70%, rgba(69,168,255,0) 70%) 50px 50px / 650px 650px no-repeat no-repeat, /* Orbit-7 */ radial-gradient(ellipse at 50% 50%, rgba(0,21,255,0) 0%, rgba(0,21,255,0) 69%, rgba(255,255,255,0.49) 69.5%, rgba(255,255,255,0.8) 70%, rgba(69,168,255,0) 70%) 0px 0px / 750px 750px no-repeat no-repeat, /* Orbit-8 */ repeating-radial-gradient(ellipse at 50% 50%, rgba(0,21,255,0) 0%, rgba(0,21,255,0) 1.38%, rgba(255,255,255,0.49) 1.39%, rgba(255,255,255,0.8) 1.4%, rgba(69,168,255,0) 1.4%, rgba(69,168,255,0) 2%) 0px 0px / 750px 750px no-repeat no-repeat, /* Stars */ radial-gradient(ellipse at 50% 50%, rgba(16,16,16,1) 0%, rgba(17,17,17,1) 20%, rgba(18,18,18,1) 30%, rgba(19,19,19,1) 40%, rgba(17,1,1,1) 50%, rgba(16,16,17,1) 60%, rgba(0,16,17,1) 70%, rgba(16,16,16,1) 80%, rgba(1,1,1,1) 90%, rgba(0,0,0,1) 100%) 0px 0px / 750px 750px no-repeat no-repeat; /* BlackSpace */

Solar system

David Yushkov

some kind of hello world. not the real one(:

Colors

Views

2,310

Forks

1

Layers

17
Open in editor
Layers (17)
Uranus
radial
Saturn
radial
Jupiter
radial
Mars
radial
Earth
radial
Venus
radial
Mercury
radial
Sun
radial
Orbit-2
radial
Orbit-3
radial
Orbit-4
radial
Orbit-5
radial
Orbit-6
radial
Orbit-7
radial
Orbit-8
radial
Stars
radial
BlackSpace
radial