<div class="saturn">
<div class="clouds"></div>
<div class="planet"></div>
<div class="ring"></div>
<div class="up"></div>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #202c39;
}
.saturn {
position: relative;
}
.clouds {
position: absolute;
background-color: #283845;
width:200px;
height: 35px;
border-radius:30px;
left:-50px;
top:-50px;
box-shadow: -120px 35px #202c39, 100px 35px #202c39, 30px 35px #283845, -90px 70px #283845, 80px 70px #283845, -220px 105px #202c39, -80px 105px #283845, -90px 140px #283845, 170px 140px #283845, 270px 175px #202c39, 170px 175px #283845, 150px 210px #283845, -20px 210px #283845, -110px 245px #202c39,120px 245px #202c39, 30px 245px #283845, 50px 280px #283845;
}
.clouds:before {
position: absolute;
content:"";
background-color: #f2d492;
border-radius:50%;
width:7px;
height: 7px;
left:-10px;
box-shadow: -75px 110px #f2d492,-25px 220px #f2d492, 230px -10px #f2d492, 200px 260px #f2d492;
}
.clouds:after {
position: absolute;
content:"";
background-color: #f2d492;
border-radius:50%;
width:4px;
height: 4px;
left:30px;
top:20px;
box-shadow: 100px 300px #f2d492, 300px 100px #f2d492;
}
.planet {
position: relative;
width:200px;
height: 200px;
border-radius:50%;
background-color: #cc5803;
overflow: hidden;
}
.planet:before {
content:"";
position: absolute;
width: 100px;
height: 25px;
border-radius:20px;
top:100px;
background-color: #f29559;
left:30px;
box-shadow: 60px 0 #f29559, -75px 25px #cc5803, 45px 25px #cc5803,-20px 25px #f29559, 0 50px #f29559,60px 50px #f29559, -40px 75px #cc5803,80px 75px #cc5803, 30px 75px #f29559;
}
.planet:after {
content:"";
position: absolute;
width:200px;
height: 200px;
border-radius:50%;
box-shadow: inset -10px 10px rgba(0,0,0,0.2);
}
.ring {
width: 305px;
height: 305px;
border: solid 50px #b8b08d;
border-radius: 50%;
top: -95px;
left: -100px;
position: absolute;
transform: rotate3d(1, 0, 0, 75deg);
}
.up {
position: absolute;
width:200px;
height: 100px;
border-radius:100px 100px 0 0;
background-color: #cc5803;
top:0;
overflow: hidden;
}
.up:before {
content:"";
position: absolute;
width: 100px;
height: 25px;
border-radius:20px;
left:70px;
background-color: #f29559;
box-shadow: -75px 25px #cc5803, 45px 25px #cc5803,-20px 25px #f29559, 0 50px #f29559, -80px 50px #f29559, -110px 75px #cc5803,30px 75px #cc5803, -50px 75px #f29559;
}
.up:after {
content:"";
position: absolute;
width:200px;
height: 100px;
border-radius:100px 100px 0 0;
box-shadow: inset -10px 10px rgba(0,0,0,0.2);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.