Rohan Yeole - HomepageRohan Yeole

How I Built a Rotating Solar System Using Just HTML & CSS

By Rohan Yeole •
Table of Contents ▼

When I first started playing with animations in CSS, I wanted to see how far I could go without JavaScript. One fun challenge? Creating a realistic solar system model that rotates smoothly — entirely in HTML and CSS.
Let me walk you through how I built it — and how you can extend it to include all 8 planets.

How It Works

We’ll place the Sun in the center and create orbiting divs for each planet. Then we’ll animate these orbits using @keyframes to rotate the planets.
Each planet is:

  1. A div styled with border-radius (to be a circle)
  2. Positioned inside an orbit div, which rotates using transform: rotate()
  3. Colored to loosely match their real counterparts
Live Demo 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Solar System with CSS</title>
  
</head>
<body>
  <div id="solar-system">
    <div class="sun"></div>

    <div class="orbit mercury-orbit"><div class="planet mercury"></div></div>
    <div class="orbit venus-orbit"><div class="planet venus"></div></div>
    <div class="orbit earth-orbit"><div class="planet earth"></div></div>
    <div class="orbit mars-orbit"><div class="planet mars"></div></div>
    <div class="orbit jupiter-orbit"><div class="planet jupiter"></div></div>
    <div class="orbit saturn-orbit"><div class="planet saturn"></div></div>
    <div class="orbit uranus-orbit"><div class="planet uranus"></div></div>
    <div class="orbit neptune-orbit"><div class="planet neptune"></div></div>
  </div>
</body>
</html>
body {
      margin: 0;
      background: black;
      overflow: hidden;
    }

    #solar-system {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .sun {
      width: 100px;
      height: 100px;
      background: yellow;
      border-radius: 50%;
      box-shadow: 0 0 40px 10px white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }

    .orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: orbit linear infinite;
    }

    .planet {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      border-radius: 50%;
    }

    /* Planet Styles & Orbits */
    .mercury-orbit { width: 140px; height: 140px; animation-duration: 4s; }
    .mercury { width: 10px; height: 10px; background: gray; }

    .venus-orbit { width: 180px; height: 180px; animation-duration: 6s; }
    .venus { width: 16px; height: 16px; background: orange; }

    .earth-orbit { width: 230px; height: 230px; animation-duration: 8s; }
    .earth { width: 18px; height: 18px; background: #2d52b6; }

    .mars-orbit { width: 280px; height: 280px; animation-duration: 10s; }
    .mars { width: 14px; height: 14px; background: red; }

    .jupiter-orbit { width: 360px; height: 360px; animation-duration: 12s; }
    .jupiter { width: 30px; height: 30px; background: #d1a46f; }

    .saturn-orbit { width: 430px; height: 430px; animation-duration: 14s; }
    .saturn { width: 28px; height: 28px; background: #e8c87d; }

    .uranus-orbit { width: 500px; height: 500px; animation-duration: 16s; }
    .uranus { width: 20px; height: 20px; background: #87e3f3; }

    .neptune-orbit { width: 570px; height: 570px; animation-duration: 18s; }
    .neptune { width: 20px; height: 20px; background: #4763d4; }

    @keyframes orbit {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

Related Posts

Top Django Audit Logging Libraries for PostgreSQL Changes

Published on May 17, 2025

Django audit logging libraries helps track models changes in PostgreSQL while offering easy integration, scalability, and transperancy.&nbsp;In this guide, You will get to know the importance of audit logging, top Django libraries to implement it, and how to use them with PostgreSQL.Why Audit Logging Matters In Django applications, tracking model…

Best Practices for Structuring a Django Project

Published on May 18, 2025

In this guide, I'll show you how to structure Django project using a clean, scalable Django boilerplate I’ve developed, following industry best practices.&nbsp;A well-structured Django project not only accelerates development but also ensures maintainability and scalability.&nbsp;Whether you're just starting or refining an existing setup, this gui…

Scaling Django Applications: Best Practices for High-Traffic

Published on May 18, 2025

Scaling a Django application for high traffic requires database optimization, caching, asynchronous processing, and more for fast, reliable web performance.&nbsp;Serving a high volume of requests with Django requires thoughtful planning across several layers: your application code, database, caching strategy, asynchronous processing, and deploymen…

Design Principles in Python/Django: Real-World Examples

Published on May 18, 2025

Applying core design principles in Python/Django, like DRY, KISS, and more, ensures scalable, maintainable, high-performance web applications.This blog will guide you to master Python/Django's design philosophy for efficient and future-ready web development.&nbsp;DRY (Don’t Repeat Yourself) Avoid code duplication by abstracting recurring logic …

Building Your First Django Website - A Step-by-Step Guide

Published on May 22, 2025

In this article, I’ll walk you through how I set up a simple Django project, with zero fluff and maximum clarity for building a fast, scalable web app.Let’s build your first Django-powered website — step by step. Django is a high-level Python web framework that simplifies rapid web development.&nbsp;Whether you are launching a business site or bui…