DEV Community

Cover image for Phases of the Moon in CSS

Phases of the Moon in CSS

Mads Stoumann on April 09, 2025

You might have heard that the humble, old attr() method in CSS just got a big update. It's only in Chrome for now, but I assume the Firefox and Saf...
Collapse
 
grahamthedev profile image
GrahamTheDev

love it, except for the fact the moon is an image...disappointed in you bud I was expecting the moon itself to be in CSS! hahaha

Collapse
 
madsstoumann profile image
Mads Stoumann

Haha, yeah well ... another time!

Collapse
 
ansellmaximilian profile image
Ansell Maximilian

Awesome

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Collapse
 
nevodavid profile image
Nevo David

That sounds really creative, blending CSS with astronomical concepts!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
arize99 profile image
Arize Nnonyelu

Creative

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks

Collapse
 
cantonme profile image
Keith Larochelle

It's fantastic and exactly what I was looking for, but either I made a mistake or encountered a minor issue: the illumination for my location at 44.42° north shows the moon lit on the opposite side compared to my actual observations of it. I played around a bit and found if I change my lat from +(plus) to -(minus) essentially from north to south of the equator it is illluminated on the correct side. I must be doing something wrong somewhere. Amy ideas? Thanks.

Collapse
 
madsstoumann profile image
Mads Stoumann

Hi Keith,
I’m not sure — I already did one fix for this — could be the CSS calculations differ a bit, depending on browser, but that’s guesswork.
Best wishes,
Mads

Collapse
 
rajesh_verma_69c86ea90ea4 profile image
Rajesh Verma

Loved it. Awesome work..

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Collapse
 
kbilleter profile image
kbilleter

Well done for adding latititude. That often annoys me various moon charts / calendars (Melbourne, Australia)

Some comments have been hidden by the post's author - find out more