GRADIENT
.ART
css
Sign In
<div id="root"></div>#root {
width: 750px;
height: 750px;
background:
radial-gradient(ellipse, rgb(150 193 214) 0%, rgb(26 234 225) 70%, transparent 70%) 30px 187px / 32px 32px no-repeat, /* Uranus */
radial-gradient(ellipse, rgb(145 77 3) 0%, rgb(176 133 88) 70%, transparent 70%) 614px 170px / 35px 35px no-repeat, /* Saturn */
radial-gradient(ellipse, rgb(212 8 8) 0%, rgb(235 130 19) 70%, transparent 70%) 321px 619px / 50px 50px no-repeat, /* Jupiter */
radial-gradient(ellipse, rgb(240 31 76) 0%, rgb(212 8 8) 70%, transparent 70%) 572px 300px / 23px 23px no-repeat, /* Mars */
radial-gradient(ellipse, rgb(63 141 209) 0%, rgb(78 81 181) 70%, transparent 70%) 326px 156px / 25px 25px no-repeat, /* Earth */
radial-gradient(ellipse, rgb(212 169 42) 0%, rgb(232 208 137) 70%, transparent 70%) 236px 370px / 30px 30px no-repeat, /* Venus */
radial-gradient(ellipse, rgb(112 88 35) 0%, rgb(59 163 33) 70%, transparent 70%) 400px 300px / 20px 20px no-repeat, /* Mercury */
radial-gradient(ellipse, rgb(246 255 0) 0%, rgb(255 69 69) 70%, transparent 70%) 325px 325px / 100px 100px no-repeat, /* Sun */
radial-gradient(ellipse, transparent 0%, transparent 69%, rgb(255 255 255 / 0.49) 69.5%, rgb(255 255 255 / 0.8) 70%, transparent 70%) 300px 300px / 150px 150px no-repeat, /* Orbit-2 */
radial-gradient(ellipse, transparent 0%, transparent 69%, rgb(255 255 255 / 0.49) 69.5%, rgb(255 255 255 / 0.8) 70%, transparent 70%) 250px 250px / 250px 250px no-repeat, /* Orbit-3 */
radial-gradient(ellipse, transparent 0%, transparent 69%, rgb(255 255 255 / 0.49) 69.5%, rgb(255 255 255 / 0.8) 70%, transparent 70%) 200px 200px / 350px 350px no-repeat, /* Orbit-4 */
radial-gradient(ellipse, transparent 0%, transparent 69%, rgb(255 255 255 / 0.49) 69.5%, rgb(255 255 255 / 0.8) 70%, transparent 70%) 150px 160px / 450px 450px no-repeat, /* Orbit-5 */
radial-gradient(ellipse, transparent 0%, transparent 69%, rgb(255 255 255 / 0.49) 69.5%, rgb(255 255 255 / 0.8) 70%, transparent 70%) 100px 100px / 550px 550px no-repeat, /* Orbit-6 */
radial-gradient(ellipse, transparent 0%, transparent 69%, rgb(255 255 255 / 0.49) 69.5%, rgb(255 255 255 / 0.8) 70%, transparent 70%) 50px 50px / 650px 650px no-repeat, /* Orbit-7 */
radial-gradient(ellipse, transparent 0%, transparent 69%, rgb(255 255 255 / 0.49) 69.5%, rgb(255 255 255 / 0.8) 70%, transparent 70%) 0 0 / 750px 750px no-repeat, /* Orbit-8 */
repeating-radial-gradient(ellipse, transparent 0%, transparent 1.38%, rgb(255 255 255 / 0.49) 1.39%, rgb(255 255 255 / 0.8) 1.4%, transparent 1.4%, transparent 2%) 0 0 / 750px 750px no-repeat, /* Stars */
radial-gradient(ellipse, rgb(16 16 16) 0%, rgb(17 17 17) 20%, rgb(18 18 18) 30%, rgb(19 19 19) 40%, rgb(17 1 1) 50%, rgb(16 16 17) 60%, rgb(0 16 17) 70%, rgb(16 16 16) 80%, rgb(1 1 1) 90%, rgb(0 0 0) 100%) 0 0 / 750px 750px no-repeat; /* BlackSpace */
} Comments (1)
Yoav Kadosh
4 years ago
This is amazing! I love the high repeat count trick you used for creating the stars ✨
Colors
Views
5,004
Code size
3.29 KB
Layers
17
<iframe
src="https://gra.dient.art/embed/sy78o4t47e"
title="Solar system | GradientArt"
width="750"
height="750"
style="border: 0; max-width: 100%; aspect-ratio: 750 / 750; height: auto;"
loading="lazy"
></iframe>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