THIS is what YouTube was created for!

[user328]

I'll probably have to adapt one of the new CSS versions to work with a background photo of the moon.

I banged this one together from two scripts and a photo of the moon.

https://imgur.com/a/B6267qE

One of the scripts gives a percentage (new, crescent, quarter, gibbous, and full moon) and a boolean value for waxing or waning. The other draws the shadow and edge blur in CSS. I combined them into one script that can be used like so:

https://pastebin.com/K1QrNtUg

I'm gonna tweak it some more to get rid of the border and allow you to set the diameter in your stylesheet. Maybe add some other parameters you can tweak in the stylesheet.