css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Github repo : https://github.com/juliangarnier/3D-CSS-Solar-System Works better in webkit, buggy in FF, flat in IE. Inspired by http://neography.com/experiment/circles/solarsystem/ and http://nicolasgallagher.com/css-pseudo-element-solar-system/demo/ [update] Added some basic responsive styles


  1. Hats off to you sir, amazing.

  2. That is absolutely ridiculous. You make the rest of us look like amateurs. :)

  3. This is so good!

  4. This is nuts. I love the scale visualization.

  5. Waw, this is fucking amazing. Congratulations, it looks absolutely great, I can't stop playing with it. :)

  6. Thanks all! I had to convert images into base64, my Dropbox account was suffering

  7. Wow, this is really amazing. Great job Julian.

  8. Genial!!! Me encanta!

  9. Brilliant work, sir.

  10. This is probably the coolest thing I've ever seen.

  11. Nice! I also did a CSS-only (no JavaScript, no images) planetary system about two months ago https://developer.mozilla.org/en-US/demos/detail/planetary-system/launch

  12. Wicked... and I am not a spammybot

  13. may be an understatement, but EPIC

  14. My mind is fucken blown here.

  15. Simply amazing!!! Excellent work Julian and thanks for sharing!

  16. With skills like these, why not actual learn a programming language?

  17. surreal, amazing work!

  18. Excellent work Julian! Thanks

  19. This is pretty amazing. How much time did it take you to work this all out?

  20. Hard to tell, Approximately 1 month, 1 or 2 hours a day, sometime a little more during the weekend.

  21. The funny thing is that I finished the basics in less than a week, and spent almost a month adding or changing details

  22. Hi Julian, I'm curious as to how you made the orbits. Is this something that the 3d properties in CSS are allowing?

  23. Inspiring work!

  24. Awesome work. Hats off.

  25. Incredible! Actually the size option is one of the best indicator displays of explaining relative body size visually. But surely the distance one is not accurate? Earth orbit is like 200x bigger than sun radius.

  26. @davidelrizzo The distances are accurate, but the sizes of the planets (and sun) is not, otherwise the sun has to be 1px wide...

  27. Well done. A lot of work went into this, I hope it helps get you good contract.

  28. This is really nice, both from a technical standpoint, and from a science one - it's difficult to find a model that doesn't distort size, or distance, or such in order to be able to display things in a visible manner - the toggles solve for that nicely.

  29. I have a very good code......I want to add my width 90 length 900 helps you do want to get

  30. Really sweet code, Just love how you have every thing connected and flowing so nicely! BTW, is it possible to use this to map every star known to man? Up for a challenge? ;-)

  31. Julian the Awesome

  32. Super neato. Should chuck "outline:none" in there so clicking the UI controls doesn't get random blue rectangles showing up under Chrome :)

  33. Desde Venezuela, felicitaciones por el magnifico trabajo

  34. Fantastic! But what about pluto? :)

  35. WHERE IS PLUTO??? (haha just kidding this is awesome!)

  36. Amazing work. keep it up!

  37. Really Awesome :-)

  38. Absolutely incredible!

  39. OMG!! I ♥ IT !!!! IT'S AWESOME

  40. This is so cool

  41. Awesome Work buddy, Inspiring concept!

  42. Dang it... !!!

  43. WOW!!!!!!!!!!!!!!!! realy nice!!! tks for sharing!!!

  44. Very nice :) if i want do something like that ,what should i learn

  45. Stellar work ...

  46. That is so cool.

  47. WoOoOoOoOoOoOoOoOoW..... I am in awe! #following & #<3

  48. Damn the lightning and z-indexes are spot on! My mind doesn't accept that the sun is not moving ;)

  49. Absolutely amazing!

  50. @juliangarnier Can i embedded on my site ? ( and a credit is yours )

  51. Ya but where is Pluto?

  52. Amazing. By the way, Pluto declared no longer a planet in 2006 :)

  53. This is really really cool. I wish I had the expertise or patience to pull off something like this!

  54. Awesome! You make rest of us look amateurish.

  55. It's amazing but i'm sad the project that i wanted to do i found someone else already did it. You did a great job animation is amazing

  56. There's a lot of great projects on Codepen but this is simply top of the line. Outstanding work. I am truly impressed.

  57. unbelievable!!! SALUTE

  58. yup... I agree with EVERYONE here, this is awesome. Shame on you :D JK

  59. Its clean. Simply Super. I like it lot <3

  60. Very cool design Julian!

  61. Dear codeness!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.