The Moon Tonight is an interactive lunar phase viewer that shows you the current moon phase and lets you explore how it changes over time.
This project was originally created in 2016 as an experiment in using CSS to render the moon in all its possible phases. It initially relied on the Dark Sky API for moon phase data, but went dormant when Apple acquired and promptly shut down the service in 2023. Thanks, Apple!
In 2025, the project was rebuilt with a valuable lesson learned: when you need to calculate something as predictable as lunar phases, perhaps don't rely on a third-party API when simple maths will do the job. The moon has been reliably showing up and cycling through its phases for approximately 4.5 billion years (about 450 million times longer than Dark Sky existed 🙃).
The moon phases are calculated using the synodic month - the 29.53-day period between successive new moons. We start with a known new moon date (January 6, 2000) and calculate where we are in the current lunar cycle.
The calculation works like this:
The visual moon phases are created entirely with CSS, using positioned circular elements to simulate the shadow and illumination of the moon as seen from Earth.
The font used is Reader by Colophon Foundry.
The code is available to view on Github.