Collection of hand-picked free HTML and pure CSS Solar System code examples from Codepen and other resources.

Demo image: Pure CSS Spatial Experience

Author

  • Delvigne Frédéric

Links

Made with

  • HTML / CSS

About a code

Pure CSS Spatial Experience

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Planet Picker

Author

  • @keyframers

Links

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Planet Picker

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: splitting.css, splitting.js

Demo image: Solar System 3D Animation Pure CSS

Author

  • Fabricius Seifert

Links

Made with

  • HTML (Pug) / CSS (Stylus) / JS

About a code

Solar System 3D Animation Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Responsive Solar System as if it's an Atom

Author

  • Mustafa Enes

Links

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Responsive Solar System as if it's an Atom

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Preloading Space Animation

Author

  • Alex

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Preloading Space Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Solar System Simulator 2.0 Pure CSS

Author

  • Sam Chahine

Links

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Solar System Simulator 2.0 Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js

Demo image: The Red Planet

Author

  • Jack Thomson

Links

Made with

  • HTML (Slim) / CSS (SCSS)

About a code

The Red Planet

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Solar System

Author

  • Jack Thomson

Links

Made with

  • HTML (Slim) / CSS (SCSS)

About a code

Solar System

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Solar System with Pure CSS

Author

  • Yash Bhardwaj

Links

Made with

  • HTML / CSS

About a code

Solar System with Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Earth and Moon around Sun

Author

  • from earth

Links

Made with

  • HTML / CSS

About a code

Earth and Moon around Sun

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Sass Solar System

Author

  • Hugo Darby-Brown

Links

Made with

  • HTML / CSS (SCSS)

About a code

Sass Solar System

Sass based CSS solar system. The orbiting times are proportional to each other.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Orbital CSS

Author

  • Will Paige

Links

Made with

  • HTML / CSS

About a code

Orbital CSS

Recreating orbiting planet diagram using only CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: CSS 3D Solar System

Author

  • Julian Garnier

Links

Made with

  • HTML / CSS / JS

About a code

CSS 3D Solar System

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: jquery.js