Created a realistic moon using just CSS

#css #animation #frontend #design

Yes, I created a realistic moon using just CSS.
Let's dive right into the step by step process.

Add a div element into your HTML file and give a class name.

<div class="animated-moon"></div>

Now let's start the craft using CSS:
Start out by giving a basic shape to the element.



  width: 20rem;
  height: 20rem;
  position: absolute;
  border-radius: 50%;

Here's an image from Solar System Scope with a moon texture :

https://www.solarsystemscope.com/textures/download/2k_moon.jpg

Add this as background image for your element and give a background size a little extra for the X axis rotation to be possible.



background-image: url('https://www.solarsystemscope.com/textures/download/2k_moon.jpg')
background-size: 110% 100%;

The moment has come to craft an animation that spins and dazzles.



@keyframes moonRotation {
    0% { background-position: 0% 0%; }
    50% { background-position: 150% 0%; }
    100% { background-position: 300% 0%; }
}

Add this code to your .animated-moon class.



animation-name: moonRotation;
animation-duration: 15s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards !important;

Now, your moon would look something like this

Now, all your gotta do is unleash the superstar potential of the box-shadow property to create a stellar 3D effect for the moon.



box-shadow: inset -10px 8px 6px -5px #ffffff, // Shine of light hitting on the moon (top right )
inset 20px -20px 50px 43px rgba(0, 0, 0, 0.9), // Shadow regions on moon
7px -6px 14px rgba(255, 255, 255, 0.3215686275); // Glow outside the moon for light reflection

Final Output