Skip to content
Moon phase widget for website in javascript
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo add different styles Jan 5, 2020
screenshots change package.json and add screenshots Dec 20, 2019
src fix small style and inline-flex Jan 5, 2020
tests modify webpack conf Dec 17, 2019
.gitignore fix styles Dec 17, 2019
.npmignore Update .npmignore Dec 22, 2019
LICENSE fix package.json and readme and license Dec 20, 2019 Update Jan 15, 2020
babel.config.js init Dec 17, 2019
package.json update version Jan 5, 2020

Moon phase widget for Website

Super tiny (only 3kb minified) javascript library to add awesome moon phase widget to your website.

Moon phase widget for website

(This is a screenshot as an example)


  • Auto Geo detection
  • Moon phase name and image
  • Moon set and moon rise time
  • Moon zodiac sign
  • Super small size (This will not affect the speed of your site)
  • Ability to change the background color
  • 3 different styles (normal, small, horizontal)

How To Install (Easy way)

The easiest way to install the widget is by using CDN

Just copy the code below and paste it where you want to see the widget.

<div id="moon-phase-widget" data-color="white"></div>
<script async src="">

Thats all.

If you want you can change the background color by adding your value to data-color attribute.

Text white or hex value #FFFFFF

Also, you can choose from different styles of the widget (By adding specific value to data-style).

Normal (default style)


<div id="moon-phase-widget" data-color="white" data-style="small"></div>
<script async src="">

Horizontal orientation:

<div id="moon-phase-widget" data-color="white" data-style="horizontal"></div>
<script async src="">

Usage via npm


Install package:

npm install moon-phase-widget

Import code and styles (if you want):

import { MoonPhaseWidget } from 'moon-phase-widget'

import 'moon-phase-widget/src/index.css'

new MoonPhaseWidget('some-element-id')


More information about moon phase you can find here

Fill free to contact me if you need help with customization or installation.

You can’t perform that action at this time.