DEV Community

Cover image for Created a realistic moon using just CSS
Sridhar Murali
Sridhar Murali

Posted on • Updated on

Created a realistic moon using just CSS

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%;


Enter fullscreen mode Exit fullscreen mode

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%;


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

Now, your moon would look something like this

Image description

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


Enter fullscreen mode Exit fullscreen mode

Final Output
Image description

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

Thanks for your time
Sridhar

Top comments (10)

Collapse
 
chuniversiteit profile image
Chun Fei Lung

This looks much more convincing than I thought it would be!

Collapse
 
jordantylerburchett profile image
Jordan-Tyler Burchett

Ditto

Collapse
 
freakyspeedster profile image
Sridhar Murali

Thank you so much πŸ™‚

Collapse
 
lexiebkm profile image
Alexander B.K.

What does the {% embed %} mean in the declaration of the @keyframes ?
I have never seen it in common syntax of the rule.

Collapse
 
freakyspeedster profile image
Sridhar Murali

It was added by mistake. Thanks for pointing out. Updated πŸ‘

Collapse
 
pxlmastrxd profile image
Pxlmastr

Looks pretty good to me! Great job!

Collapse
 
freakyspeedster profile image
Sridhar Murali

Thank you so much πŸ™‚

Collapse
 
jordantylerburchett profile image
Jordan-Tyler Burchett

Wow that is incredible!

Collapse
 
freakyspeedster profile image
Sridhar Murali

Thank you so much πŸ™‚

Collapse
 
jordantylerburchett profile image
Jordan-Tyler Burchett

Thank you for sharing