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

Here's a codepen link to play around : https://codepen.io/Sridhar-Murali/pen/yLGmNbb?editors=1100

Thanks for your time
Sridhar

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more