Unlock the timeless rhythm of the night sky with our interactive Moon Phase Widget Embed. Designed for anyone captivated by Earth’s celestial companion – from astronomers and photographers to hunters and casual observers – this elegant tool delivers precise, real-time lunar data directly to your digital space. Effortlessly integrate it into your website, blog, or Notion page and empower your audience with instant, beautiful insights into the moon’s ever-changing journey.
Free Lunar Widget Features
- Current Moon Phase: See exactly what phase the moon is in today.
- Illumination Percentage: Understand how much of the moon is visible tonight.
- Automatic Updates: Adjusts automatically based on your location.
- Embeddable Anywhere: Works on websites, blogs, Notion, or any HTML page.
- Minimal & Lightweight: Clean interface with no distractions.
Safe & lightweight (< 15 KB total). No tracking. Works in any modern browser.
Live Demo Here 👇
How to Use
Copy the widget code and paste it into your webpage or blog.
Embed the Moon Phase Widget
Copy the code below and paste it into your website or blog:
<!-- Moon Phase Widget -->
<div id="moon-widget" style="max-width:350px; text-align:center; font-family:system-ui, sans-serif; margin:auto;">
<img id="moon-img" src="" alt="Moon Phase" style="width:120px; height:auto; margin-bottom:10px; border-radius: 50%; border: 3px solid #30bdf0; object-fit: cover;">
<div id="moon-phase" style="font-size:24px; font-weight:700; color:#30bdf0; margin-bottom: 5px;">Loading...</div>
<div id="moon-illum" style="font-size:16px; opacity:0.85; margin-bottom:15px;"></div>
<div style="font-size:12px; opacity:0.7; margin-top:15px;">
Powered by <a href="https://moonphase.today" target="_blank" rel="noopener" style="color:#30bdf0; text-decoration:none; font-weight:600;">Moon Phase Today</a>
</div>
</div>
<script src="https://unpkg.com/suncalc@1.9.0/suncalc.js"></script>
<script>
const images = {
'New Moon': 'https://moonphase.today/wp-content/uploads/2025/10/new-moon-phase-diagram-small.webp',
'Waxing Crescent': 'https://moonphase.today/wp-content/uploads/2025/10/waxing-crescent-moon-phase-diagram-small.webp',
'First Quarter': 'https://moonphase.today/wp-content/uploads/2025/10/first-quarter-moon-phase-diagram-small.webp',
'Waxing Gibbous': 'https://moonphase.today/wp-content/uploads/2025/10/waxing-gibbous-moon-phase-diagram-small.webp',
'Full Moon': 'https://moonphase.today/wp-content/uploads/2025/10/full-moon-phase-diagram-small.webp',
'Waning Gibbous': 'https://moonphase.today/wp-content/uploads/2025/10/waning-gibbous-moon-phase-diagram-small.webp',
'Last Quarter': 'https://moonphase.today/wp-content/uploads/2025/10/last-quarter-moon-phase-diagram-small.webp',
'Waning Crescent': 'https://moonphase.today/wp-content/uploads/2025/10/waning-crescent-moon-phase-diagram-small.webp'
};
function getMoonPhaseName(phaseValue, fractionValue) {
if (fractionValue >= 0.995) return "Full Moon";
if (fractionValue <= 0.005) return "New Moon";
if (phaseValue < 0.25) return "Waxing Crescent";
if (phaseValue < 0.28) return "First Quarter";
if (phaseValue < 0.50) return "Waxing Gibbous";
if (phaseValue < 0.75) return "Waning Gibbous";
if (phaseValue < 0.78) return "Last Quarter";
return "Waning Crescent";
}
function updateMoon(lat, lng){
const now = new Date();
const moon = SunCalc.getMoonIllumination(now);
const phaseName = getMoonPhaseName(moon.phase, moon.fraction);
const illumPercent = Math.round(moon.fraction * 100);
document.getElementById('moon-phase').textContent = phaseName;
document.getElementById('moon-illum').textContent = illumPercent + '% illuminated';
document.getElementById('moon-img').src = images[phaseName];
document.getElementById('moon-img').alt = phaseName + ' Moon Phase';
}
navigator.geolocation.getCurrentPosition(
pos => updateMoon(pos.coords.latitude, pos.coords.longitude),
() => {
console.warn("Geolocation denied or failed. Using default coordinates (Kansas, USA).");
updateMoon(39.8283, -98.5795);
}
);
</script>
Allow location access for personalized lunar information.
Enjoy real-time updates of the current moon phase and illumination.
Embedding the Moon Phase Widget: Step-by-Step Guides for Popular Platforms
Your Moon Phase Widget is fully self-contained and easy to embed—just copy the code from the section above and paste it where instructed. It works best on platforms that support HTML and JavaScript (including geolocation for personalized results). Below are the simplest, most user-friendly methods for the top places people are likely to use it. I’ve focused on free or built-in tools with minimal steps—no coding expertise required!
1. WordPress
- Log in to your WordPress dashboard.
- Open the page or post where you want the widget.
- Click the + icon to add a new block.
- Search for Custom HTML and add it.
- Paste the entire widget code into the block.
- Preview (it’ll load the moon phase live), then Update or Publish.
Tip: It fits perfectly in sidebars too—add it via Appearance > Widgets > Custom HTML.
2. Strikingly
- Open your site in the Strikingly editor.
- Click Add New Section on the left panel.
- Choose App Store & HTML > HTML (or Embed and HTML).
- Paste the widget code into the HTML box.
- Click Save, then Publish your site.
Tip: Resize the section to ~400px wide for best display—it centers automatically.
3. Google Sites
- Edit your site and click Insert on the right panel.
- Select Embed.
- Switch to the Embed code tab.
- Paste the entire widget code.
- Click Insert—drag to resize if needed.
- Publish the site.
Tip: It runs JavaScript natively, so geolocation works great.
4. Blogger
- Go to your Blogger dashboard > Layout (for sidebar/widget) or edit a post.
- For sidebar: Click Add a Gadget > HTML/JavaScript.
- Or for a post: Switch to HTML view in the editor.
- Paste the code (give it a title like “Moon Phase” if in a gadget).
- Save and view your blog.
Tip: Blogger fully supports JS—ideal for Blogspot users.
5. Wix
- In the Wix Editor, go to the page.
- Click + Add Elements > Embed Code > Embed HTML (or Custom Element).
- Drag the element onto your page.
- Click Enter Code and paste the widget code.
- Apply, resize the box (~350px wide), and Publish.
Tip: It loads in a secure frame but runs JS and geolocation smoothly.
6. Squarespace (premium builder)
Note: Needs a Business plan or higher for full JavaScript support.
- Edit the page and click + to add a block.
- Choose Code block.
- Paste the widget code.
- Set language to HTML (it auto-enables JS).
- Save and refresh—done!
Tip: Change the blue color (#30bdf0) in the code to match your theme
7. Notion (free & paid plans – works perfectly)
Notion’s Embed block handles direct iframe links flawlessly, and we’ve hosted a clean standalone version just for this.
Recommended method (takes 10 seconds):
- Open any Notion page.
- Type /embed and select Embed.
- Paste this single URL: 👉 https://moonphase.today/wp-content/uploads/2025/11/Free-Moon-Phase-Widget-Notion.html
- Press Enter — the widget loads instantly, no borders, no scrollbars.
Alternative (HTML block):
- Type /html → add HTML block.
- Paste the full original widget code from above.
Most users go with the Embed method — it’s cleaner and updates perfectly every time you open the page.
Perfect for dashboards, daily journals, habit trackers, mood boards, or astrology pages! 🌙
Why Use This Widget
- Plan night photography or stargazing trips with precision.
- Coordinate hunting or outdoor activities around lunar patterns.
- Enhance your site or blog with a visually appealing, interactive moon tracker.
- Perfect for educational or astronomy-focused content.
- Check the Moon Phase on your Birthday
Frequently Asked Questions
Q: Is this widget free?
A: Yes, the Moon Phase Widget is completely free to use and embed anywhere.
Q: Does it work worldwide?
A: Absolutely. The widget works anywhere on earth, not guaranteed outside our atmosphere.
Q: Can I customize the look?
A: The widget is designed to be lightweight and visually clean, but CSS tweaks allow minor style adjustments. Swap out the color:#30bdf0 to something that matches your websites theme.
Q: Does it show moonrise and moonset times?
A: No — this widget focuses on phase and illumination only, keeping it minimal and distraction-free.
Q: How often does it update?
A: Updates in real time whenever the page is loaded, reflecting the current lunar phase accurately.
Ready to add the moon to your site?
Get the Code Now