FREE Moon Phase Widget Embed - Add Moon Phase to Website

Q: Does it show moonrise and moonset times?

No — this widget focuses on phase and illumination only, keeping it minimal and distraction-free.

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
How to Use
Embedding the Moon Phase Widget: Step-by-Step Guides for Popular Platforms
Why Use This Widget
Frequently Asked Questions

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.

Copy the code below and paste it into your website or blog:

Preview

Embed code

<!-- Moon Phase Widget by moonphase.today -->
<div id="moon-widget" style="width:320px;background:#0a0e1a;border-radius:16px;border:1px solid #1e2d45;padding:20px;font-family:system-ui,sans-serif;">
  <div style="display:flex;flex-direction:column;align-items:center;margin-bottom:18px;">
    <img id="mw-img" src="" alt="Moon phase" style="width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid #30bdf0;background:#1a2035;margin-bottom:12px;">
    <div style="font-size:11px;font-weight:600;color:#30bdf0;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;">Moon Phase Today</div>
    <div id="mw-phase" style="font-size:22px;font-weight:600;color:#ffffff;line-height:1.2;margin-bottom:4px;">Loading…</div>
    <div id="mw-illum" style="font-size:14px;color:#a0bcd0;"></div>
  </div>
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;">
    <div style="background:#0f1828;border-radius:8px;padding:10px 12px;border:0.5px solid #2a3d55;"><div style="font-size:10px;color:#7090a8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">Moon Age</div><div id="mw-age" style="font-size:14px;font-weight:500;color:#e0eeff;">—</div></div>
    <div style="background:#0f1828;border-radius:8px;padding:10px 12px;border:0.5px solid #2a3d55;"><div style="font-size:10px;color:#7090a8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">Next Full Moon</div><div id="mw-full" style="font-size:14px;font-weight:500;color:#e0eeff;">—</div></div>
    <div style="background:#0f1828;border-radius:8px;padding:10px 12px;border:0.5px solid #2a3d55;"><div style="font-size:10px;color:#7090a8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">Next New Moon</div><div id="mw-new" style="font-size:14px;font-weight:500;color:#e0eeff;">—</div></div>
    <div style="background:#0f1828;border-radius:8px;padding:10px 12px;border:0.5px solid #2a3d55;"><div style="font-size:10px;color:#7090a8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;">Visibility</div><div id="mw-vis" style="font-size:14px;font-weight:500;color:#e0eeff;">—</div></div>
  </div>
  <div style="margin-bottom:14px;">
    <div style="display:flex;justify-content:space-between;font-size:11px;color:#7090a8;margin-bottom:5px;"><span>New</span><span>Illumination</span><span>Full</span></div>
    <div style="height:5px;background:#1a2a3a;border-radius:3px;overflow:hidden;"><div id="mw-bar" style="height:100%;background:linear-gradient(90deg,#1a6888,#30bdf0);border-radius:3px;width:0%;"></div></div>
  </div>
  <div style="font-size:11px;color:#7090a8;text-align:center;padding-top:12px;border-top:0.5px solid #1e2d45;">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>
(function(){
  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 getPhaseName(p,f){
    if(f>=0.995)return'Full Moon';
    if(f<=0.005)return'New Moon';
    if(p<0.25)return'Waxing Crescent';
    if(p<0.28)return'First Quarter';
    if(p<0.5)return'Waxing Gibbous';
    if(p<0.75)return'Waning Gibbous';
    if(p<0.78)return'Last Quarter';
    return'Waning Crescent';
  }
  function daysUntil(t){
    const L=29.53058770576,m=SunCalc.getMoonIllumination(new Date());
    let d=t==='full'?(0.5-m.phase)*L:(1-m.phase)*L;
    if(d<0)d+=L;
    return Math.round(d);
  }
  function run(){
    const moon=SunCalc.getMoonIllumination(new Date());
    const name=getPhaseName(moon.phase,moon.fraction);
    const pct=Math.round(moon.fraction*100);
    const full=daysUntil('full'),newm=daysUntil('new');
    const age=(moon.phase*29.53058770576).toFixed(1);
    const vis=pct<5?'Not visible':pct<30?'Faint sliver':pct<60?'Partly lit':pct<90?'Mostly lit':'Fully lit';
    document.getElementById('mw-phase').textContent=name;
    document.getElementById('mw-illum').textContent=pct+'% illuminated';
    document.getElementById('mw-age').textContent=age+' days';
    document.getElementById('mw-full').textContent=full===0?'Tonight':full+' day'+(full===1?'':'s');
    document.getElementById('mw-new').textContent=newm===0?'Tonight':newm+' day'+(newm===1?'':'s');
    document.getElementById('mw-vis').textContent=vis;
    document.getElementById('mw-bar').style.width=pct+'%';
    const img=document.getElementById('mw-img');
    img.src=images[name];img.alt=name;
  }
  if(window.SunCalc)run();
  else document.querySelector('script[src*="suncalc"]').addEventListener('load',run);
})();
</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

Powered by MoonPhase.today

FREE Moon Phase Widget Embed – Add Moon Phase to Website

Table of Contents