Comments (1)
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 */
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