A friend of mine suggested me to do some animated planet stuff with CSS. I gave it a go and ended up with a kinda-cool animated planet Earth. I had this one in my local playground as yet, but today I’m going to share it online right here.

Before going any further, I want to tell you that I have made it look like 3d-earth and used CSS3 keyframes for the rotating animation. You must see the demo before we jump into the code mess.

The Concept of CSS Earth

This idea demands a realtime rotating sphere, which is not possible in CSS. But a lookalike is doable, all you need is to throw some CSS ingredients into a div and there you go.

For animation, I’ve used a small CSS keyframes trick that makes it appear lively and rotating.


It’s just a single div, trust me.

<div id="earth"></div>

Will play with :before and :after of #earth in the next section to add some detailing.


Now comes the important part, the styling.

I added some width and height to #earth, and then gave it a background-image similar to flat earth map. Here’s the small preview of our flat earth map I found on the internet.

Our #earth is relatively positioned. To make it appear spherical, I added a 50% of border-radius.


Detailing of our earth as a 3d object has been done in 3 layers which is covered below step-by-step with some CSS code snippets.

  1. Setting up the baseline and some box-shadow play with the #earth itself (mainly for the shadow on the right)
    #earth {
      /* [1] Allow it to contain the absolutely positions pseudo-elements (later-on) */
      position: relative;
      /* [2] Set-up the dimensions and spacing */
      width: 300px;
      height: 300px;
      margin: 3em auto;
      /* [3] Prepare the animation effects */
      transition: transform 200ms linear;
      animation: rotate 4s linear infinite; /* This is going to be defined in the next step */
      /* [4] Tweak the appearance, and give it a nice background i.e. the world map */
      color: #000;
      border-radius: 50%;
      background: url(path/to/world-map-image) 0 0 repeat / 630px;
      box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
      /* [5] Position things in a 3d space */
      transform-style: preserve-3d;
  2. Again applying box-shadow in #earth:before for the shadow on left
    #earth:after {
      /* [1] Break the flow to show this as an overlay */
      position: absolute;
      top: 0;
      left: 0;
      /* [2] Make it take all the space available in the box (ahem... globe!) */
      width: 100%;
      height: 100%;
      /* [3] Make sure this has no generated content, as we want this just for fancy purposes */
      content: '';
      /* [4] Give it some shape and shadow */
      border-radius: 50%;
      box-shadow: -80px 15px 80px 10px rgba(0,0,0,.9) inset;
  3. Finally applying some CSS3 radial-gradient to the background of #earth:after to give our earth a spherical finish
    #earth:before {
      /* [1] Again, break the flow to show this as an overlay */
      position: absolute;
      top: 0;
      left: 0;
      /* [2] Again, give it all the available space */
      width: 100%;
      height: 100%;
      /* [3] Duh. */
      content: '';
      /* [4] Add some shape and overlay effect to it */
      opacity: .2;
      border-radius: 50%;
      background: radial-gradient(circle at 100px 100px, #fff, #000);

The :before and :after of #earth are absolute positioned, and carry same height, width and border-radius as the main element.

I’ve fixed the background-size of our earth to 630 pixels to fit the image perfectly inside our #earth. I come up with this number after a number of adjustments.

The Animation

Now comes the animation part. Our earth map image is very wide. Our #earth element is of 300x300px, hence it shows earth map under 300x300px only.

Now if we linearly move our background from 0 to 630px of horizontal position, we can give #earth a rotating animation effect. I’ve implemented this with the help of CSS keyframes.

@keyframes rotate {
  0% {background-position: 0 0;}
  100% {background-position: 630px 0;}

If you put everything together, preview below the results you’ll be getting.

Demo the CSS-only Earth

On the demo page, I’m using a background image for the body to make the environment look like space, just a few stars repeating over-and-over-again as you can see in the background.

I wanted to add curved and blurred edges to our earth but that’s not doable with the technique I followed – as far as I know.

Hope you enjoyed this article. Let me know your thoughts on this. Cheers!