Categories
CSS HTML Web development

CSS Saturn/ Planet Rings

CSS Planet with Rings

Demo:

*to see the code on the website click here.

To create the CSS Saturn/ Planet Rings follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="saturn">
  <div class="clouds"></div>
  <div class="planet"></div>
  <div class="ring"></div>
    <div class="up"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #202c39;
}

.saturn {
  position: relative;
}

Add clouds and stars:

.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;
}

Style the planet:

.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);
}
.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);
}

Add the ring/ orbit:

.ring {
  width: 305px;
  height: 305px;
  border: solid 50px #b8b08d;
  border-radius: 50%;
  top: -95px; 
  left: -100px; 
  position: absolute;
  transform: rotate3d(1, 0, 0, 75deg); 
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Moon orbiting the Earth on the SVG path

Solar System Animation

CSS Plane Animation