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