🌕Welcome to the Lunar Dashboard🌕
The Moon is one of the most fascinating objects in our sky—constantly changingalways inspiring. This page provides real-time updates on the current moon phaseits position relative to the Sunand upcoming moon phases and lunar eclipses. Whether you’re an astronomy enthusiast or simply moon-curiouseverything you need to track the lunar cycle and follow our celestial neighbor is right here.
For accurate local times and live Moon position updatesplease accept cookies.
<>
#moon-overview-widget {
font-family: Arialsans-serif;
max-width: 700px;
margin: 20px auto;
color: #333;
font-size: 0.85rem;
}
.moon-overview-card {
background: #f9f9f9;
border-radius: 8px;
border: 1px solid #ccc;
box-shadow: 0 2px 6px rgba(0000.1);
padding: 14px 16px 10px;
box-sizing: border-box;
transition: transform 0.25s easebox-shadow 0.25s ease;
}
.moon-overview-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0000.18);
}
.moon-overview-title {
margin: 0 0 6px 0;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
}
.moon-location-status {
font-size: 0.8rem;
color: #666;
text-align: center;
margin-bottom: 8px;
}
.moon-overview-table {
width: 100%;
border-collapse: collapse;
}
.moon-overview-table th,
.moon-overview-table td {
border: 1px solid #ccc;
padding: 4px 6px;
text-align: left;
transition: background-color 0.3s easecolor 0.3s ease;
}
.moon-overview-table th {
background-color: #f0f0f0;
width: 40%;
font-weight: bold;
}
/* hover like the moon calendar */
.moon-overview-table tbody tr:hover {
background-color: #cde6f7;
color: #222;
cursor: default;
}
.moon-overview-updated {
margin-top: 6px;
font-size: 0.78rem;
color: #666;
text-align: right;
}
@media (max-width: 480px) {
.moon-overview-card {
padding: 12px 10px 8px;
}
.moon-overview-title {
font-size: 1.05rem;
}
.moon-overview-table th,
.moon-overview-table td {
padding: 3px 4px;
}
}
>
<>
/* Make widget fill the content column */
#moon-live-widget {
display: flex;
justify-content: center;
align-items: stretch;
margin: 1.5rem 0;
width: 100%;
}
#moon-live-widget .moon-card {
font-family: system-ui-apple-systemBlinkMacSystemFont"Segoe UI",
sans-serif;
background: radial-gradient(circle at top#050816 0#02030a 40%#000 100%);
color: #f5f5f5 !important;
border-radius: 18px;
padding: 20px 22px 18px;
box-shadow: 0 16px 40px rgba(0000.6);
border: 1px solid rgba(2552552550.12);
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Force key text colors so the theme can't darken them */
#moon-live-widget .moon-title,
#moon-live-widget .moon-subtitle,
#moon-live-widget .moon-geometry-title,
#moon-live-widget .moon-geometry-subtitle,
#moon-live-widget .moon-geometry-info,
#moon-live-widget .moon-stats {
color: #f5f5f5 !important;
}
#moon-live-widget .moon-title {
font-size: 1.3rem;
font-weight: 600;
margin: 0 0 4px 0;
}
#moon-live-widget .moon-subtitle {
font-size: 0.9rem;
opacity: 0.88;
margin-bottom: 10px;
}
#moon-live-widget .moon-timestamp {
font-size: 0.8rem;
opacity: 0.8;
margin-bottom: 10px;
}
/* Geometry block */
#moon-live-widget .moon-geometry {
margin-bottom: 12px;
}
#moon-live-widget .moon-geometry-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 4px;
}
#moon-live-widget .moon-geometry-subtitle {
font-size: 0.8rem;
opacity: 0.85;
margin-bottom: 10px;
}
/* Bigger 2D figure */
#moon-live-widget .moon-geometry-canvas-wrapper {
width: 100%;
height: 320px;
overflow: hidden;
border-radius: 14px;
background: #000;
border: 1px solid rgba(2552552550.2);
}
#moon-live-widget #moon-geometry-canvas {
display: block;
width: 100%;
height: 100%;
}
#moon-live-widget .moon-geometry-legend {
margin-top: 8px;
font-size: 0.8rem;
opacity: 0.9;
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
#moon-live-widget .moon-geo-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 999px;
margin-right: 4px;
}
#moon-live-widget .moon-geo-sun {
background: #ffd45a;
}
#moon-live-widget .moon-geo-earth {
background: #4da6ff;
}
#moon-live-widget .moon-geo-moon {
background: #c0c0c0;
}
#moon-live-widget .moon-geometry-info {
margin-top: 4px;
font-size: 0.78rem;
opacity: 0.9;
}
/* Modern text stats row instead of table */
#moon-live-widget .moon-stats {
margin-top: 10px;
font-size: 0.85rem;
opacity: 0.9;
line-height: 1.4;
}
#moon-live-widget .moon-stats strong {
font-weight: 600;
}
/* Phase bar */
#moon-live-widget .phase-bar {
width: 100%;
height: 6px;
border-radius: 999px;
background: rgba(2552552550.12);
margin-top: 8px;
overflow: hidden;
}
#moon-live-widget .phase-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg#ffd27f#fff5cc);
transition: width 0.4s ease-out;
}
@media (max-width: 600px) {
#moon-live-widget .moon-card {
padding: 16px 14px 14px;
}
}
>
🌕 Countdown to Next Full Moon
Loading…
<>
/* Shared base */
#moon-countdown,
#moon-phases-widget {
font-family: system-ui-apple-systemBlinkMacSystemFont"Segoe UI"sans-serif;
color: #0f172a;
max-width: 640px;
margin: 20px auto;
box-sizing: border-box;
}
/* Countdown card */
.moon-card {
padding: 18px 20px 16px;
border-radius: 14px;
background: #ffffff;
border: 1px solid #e2e8f0;
box-shadow: 0 8px 24px rgba(1523420.06);
text-align: center;
transition: transform 0.25s easebox-shadow 0.25s ease;
position: relative;
overflow: hidden;
}
/* subtle top accent bar */
.moon-card::before {
content: "";
position: absolute;
inset: 0;
height: 4px;
background: linear-gradient(90deg#38bdf8#6366f1);
opacity: 0.9;
}
.moon-card-title {
margin: 8px 0 8px;
font-size: 1.3rem;
font-weight: 600;
}
.moon-countdown-timer {
font-size: 1.7rem;
font-weight: 700;
letter-spacing: 0.03em;
margin-top: 4px;
}
.moon-countdown-datetime {
font-size: 0.9rem;
color: #64748b;
margin-top: 6px;
}
.moon-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(1523420.12);
}
/* Phases block */
.moon-phases-wrapper {
text-align: left;
}
.moon-phases-title {
text-align: center;
margin: 12px 0 14px;
font-size: 1.2rem;
font-weight: 600;
}
.moon-phases-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.moon-phase-card {
flex: 1 1 130px;
max-width: 150px;
padding: 12px 10px;
border-radius: 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
text-align: center;
box-shadow: 0 2px 6px rgba(1523420.04);
transition: transform 0.25s easebox-shadow 0.25s easebackground 0.2s ease;
cursor: default;
}
.moon-phase-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(1523420.12);
background: #eff6ff;
}
.moon-phase-emoji {
font-size: 2.3rem;
margin-bottom: 4px;
}
.moon-phase-name {
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 2px;
}
.moon-phase-date {
font-size: 0.8rem;
color: #64748b;
}
@media (max-width: 480px) {
.moon-card {
padding: 14px 12px 12px;
}
.moon-countdown-timer {
font-size: 1.4rem;
}
.moon-phase-card {
flex: 1 1 45%;
}
}
>
<>
.moon-calendar {
font-family: Arialsans-serif;
border-collapse: collapse;
width: 100%;
max-width: 700px;
margin: 20px auto;
color: #333;
font-size: 0.85rem;
}
.moon-calendar th,
.moon-calendar td {
border: 1px solid #ccc;
padding: 4px 6px;
text-align: center;
transition: background-color 0.3s easecolor 0.3s ease;
}
.moon-calendar th {
background-color: #f0f0f0;
}
.moon-calendar td.phase {
white-space: nowrap;
}
.moon-calendar caption {
caption-side: top;
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 10px;
}
.moon-calendar .month {
font-weight: bold;
background-color: #fafafa;
color: #333;
transition: color 0.3s ease;
}
/* Softer hover background */
.moon-calendar tbody tr:hover {
background-color: #cde6f7; /* lighter blue */
color: #222;
cursor: default;
}
/* Keep month cell text dark on hover */
.moon-calendar tbody tr:hover .month {
color: #222;
}
>
🌙 Moon Phases Calendar – next 12 months
| Month |
New Moon 🌑 |
First Quarter 🌓 |
Full Moon 🌕 |
Third Quarter 🌗 |
Dates are shown in your local time zone (based on your device time).
<>
#earthlive-widget {
width: 100%;
margin: 1.5rem 0;
display: flex;
justify-content: center;
}
#earthlive-widget .earth-card {
width: 100%;
padding: 18px;
border-radius: 16px;
box-sizing: border-box;
background: radial-gradient(circle at top#eef6ff 0#d7e7ff 40%#c7dbff 100%);
border: 1px solid rgba(0,0,0,0.08);
font-family: system-ui-apple-systemBlinkMacSystemFont"Segoe UI"sans-serif;
color: #0f172a;
}
#earthlive-widget .earth-title {
font-weight: 600;
font-size: 1.2rem;
margin-bottom: 6px;
}
#earthlive-widget .earth-timestamp {
font-size: 0.85rem;
opacity: 0.8;
margin-bottom: 10px;
}
#earthlive-widget .earth-map-wrapper {
width: 100%;
aspect-ratio: 2 / 1; /* classic world map ratio */
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(15,23,42,0.16);
background: #87c2ff; /* fallback ocean color */
}
#earth-canvas {
width: 100%;
height: 100%;
display: block;
}
>
This interactive 2D map offers a live snapshot of our planetshowing the real-time positions of both the Moon and the Sun in the sky. You can instantly see which parts of the world are bathed in daylight and which are wrapped in nightthanks to a subtle day-night shading effect that moves smoothly across continents as the Earth rotates. The bright zone represents daytime—where the Sun is currently above the horizon—while the darker regions show where night has fallen. The Moon icon tracks its current position relative to the Earth and Sunproviding a fascinating visual of how it travels across our sky.
🌘 Understanding Lunar Eclipses
A lunar eclipse happens when the Earth moves between the Sun and the Mooncasting its shadow onto the Moon. The exact appearance depends on how deeply the Moon passes into Earth’s shadow.
<>
.lunar-eclipse-intro {
font-family: Arialsans-serif;
max-width: 700px;
margin: 20px auto;
font-size: 0.9rem; /* smaller than native blog font */
line-height: 1.5;
color: #333;
}
.lunar-eclipse-intro h3 {
font-size: 1.05rem;
margin: 0 0 6px 0;
text-align: left !important; /* force flush left */
}
.lunar-eclipse-intro h4 {
font-size: 0.95rem;
margin: 10px 0 4px 0;
}
.lunar-eclipse-intro p {
margin: 0 0 6px 0;
}
>
🌑 Total Lunar Eclipse (Full Eclipse)
The whole Moon passes into Earth’s umbrathe darkest part of the shadow.
The Moon often turns a deep red or copper colorcreating the famous
“Blood Moon.”
🌒 Partial Lunar Eclipse
Only part of the Moon enters the umbra. You’ll see a dark “bite” taken out of the Moon
as Earth’s shadow moves across it.
🌘 Penumbral Lunar Eclipse
The Moon passes only through Earth’s penumbrathe lighter outer part
of the shadow. The Moon just dims slightlymaking this type the most subtle and
hardest to notice.
📅 Upcoming Lunar Eclipses
Below is an updated overview of the next eclipses visible from Earth.
<>
.eclipse-calendar {
font-family: Arialsans-serif;
border-collapse: collapse;
width: 100%; /* full width of its container */
/* max-width: 600px; removed so it can go 100% */
margin: 20px auto;
color: #333;
font-size: 0.85rem;
table-layout: fixed; /* Fix column widths */
}
.eclipse-calendar th,
.eclipse-calendar td {
border: 1px solid #ccc;
padding: 4px 6px;
text-align: center;
overflow-wrap: break-word;
}
.eclipse-calendar th {
background-color: #f7f7f7;
}
.eclipse-calendar caption {
caption-side: top;
font-weight: bold;
font-size: 1.15rem;
margin-bottom: 8px;
}
.eclipse-calendar tbody tr:hover {
background-color: #e4f0fb;
}
.eclipse-calendar colgroup col:first-child {
width: 25%; /* Date column */
}
.eclipse-calendar colgroup col:nth-child(2) {
width: 25%; /* Type column */
}
.eclipse-calendar colgroup col:last-child {
width: 50%; /* Visibility column */
}
.type-total {
color: #a05252;
font-weight: 600;
}
.type-partial {
color: #dcae66;
font-weight: 600;
}
.type-penumbral {
color: #6a8fbf;
font-weight: 600;
}
>
🌕 Lunar Eclipses Calendar 2025–2034 (UTC)
| Date (UTC) |
Type |
Visibility |
| Aug 282026 | Partial | Visible in EuropeWest AsiaAfricaNorth AmericaSouth AmericaPacificAtlanticIndian OceanAntarctica |
| Feb 202027 | Penumbral | Visible in EuropeAsiaNorth/West AustraliaAfricaMuch of North AmericaSouth AmericaPacificAtlanticIndian OceanArcticAntarctica |
| Aug 172027 | Penumbral | Visible in EuropeAsiaNorth/West AustraliaAfricaMuch of North AmericaSouth AmericaPacificAtlanticIndian OceanArcticAntarctica |
| Jan 112028 | Partial | Visible in EuropeNorth/West AsiaAfricaNorth AmericaSouth AmericaPacificAtlanticIndian OceanArctic |
| Jul 062028 | Partial | Visible in EuropeAsiaAustraliaAfricaSouth/East South AmericaPacificAtlanticIndian OceanAntarctica |
| Dec 312028 | Total | Visible in EuropeAsiaAustraliaAfricaNorth/West North AmericaPacificAtlanticIndian OceanArctic |
| Jun 252029 | Total | Visible in EuropeWest AsiaAfricaNorth AmericaSouth AmericaPacificAtlanticIndian OceanAntarctica |
| Dec 202029 | Total | Visible in EuropeAsiaNorth/West AustraliaAfricaNorth AmericaSouth AmericaPacificAtlanticIndian OceanArctic |
| Jun 152030 | Partial | Visible in EuropeAsiaAustraliaAfricaSouth/East South AmericaPacificAtlanticIndian OceanAntarctica |
| Dec 092030 | Penumbral | Visible in EuropeAsiaNorth/West AustraliaAfricaNorth AmericaSouth AmericaPacificAtlanticIndian OceanArctic |
| May 062031 | Penumbral | Visible in EuropeWest AsiaAfricaNorth AmericaSouth AmericaPacificAtlanticIndian OceanAntarctica |
| Oct 292031 | Penumbral | Visible in Much of EuropeNorth/East AsiaMuch of AustraliaNorth/West AfricaNorth AmericaSouth AmericaPacificAtlanticArcticAntarctica |
| Apr 252032 | Total | Visible in South/East EuropeAsiaAustraliaMuch of AfricaMuch of North AmericaPacificAtlanticIndian OceanAntarctica |
| Oct 182032 | Total | Visible in EuropeAsiaAustraliaAfricaMuch of North AmericaNorth/East South AmericaPacificAtlanticIndian OceanArcticAntarctica |
| Apr 142033 | Total | Visible in EuropeAsiaAustraliaAfricaMuch of South AmericaPacificAtlanticIndian OceanAntarctica |
| Oct 072033 | Total | Visible in East EuropeAsiaAustraliaNorth AmericaSouth AmericaPacificAtlanticIndian OceanArcticAntarctica |
| Apr 032034 | Penumbral | Visible in EuropeAsiaAustraliaAfricaEast South AmericaPacificAtlanticIndian OceanArcticAntarctica |
| Sep 272034 | Partial | Visible in EuropeMuch of AsiaAfricaNorth AmericaSouth AmericaPacificAtlanticIndian OceanArcticAntarctica |
Dates and times are shown in UTC. Visibility depends on location and weather.
Did You Know?
<>
/* Import Google Font 'Poppins' for a cleanmodern look */
@import url('fonts.googleapis.com');
/* Container s */
.moon-faq-container {
max-width: 800px;
margin: 30px auto;
font-family: 'Poppins'sans-serif;
color: #333;
}
.moon-faq-container h2 {
color: #003366; /* Deep blue title color */
text-align: center;
margin-bottom: 25px;
font-weight: 600;
}
/* Details element (the full FAQ item container) */
.moon-faq-item {
background: #ffffff;
border-radius: 8px;
margin-bottom: 15px;
box-shadow: 0 4px 10px rgba(0000.05); /* Subtle shadow for depth */
overflow: hidden; /* Ensures borders/shadows are clean */
}
/* Summary element (the question/clickable area) */
.moon-faq-item summary {
padding: 18px 25px;
cursor: pointer;
font-weight: 600;
list-: none; /* Removes default browser arrow/marker */
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f9f9f9;
transition: background-color 0.3s ease;
}
.moon-faq-item summary:hover {
background-color: #f0f0f0;
}
/* The custom indicator icon (+) */
.moon-faq-item summary::after {
content: '+';
font-size: 1.5em;
color: #003366;
transition: transform 0.3s ease;
}
/* Changes the indicator to a minus sign (-) when open */
.moon-faq-item[open] summary::after {
content: '−';
transform: rotate(180deg);
}
/* The answer content area */
.moon-faq-item .faq-answer {
padding: 15px 25px 25px;
border-top: 1px solid #eee;
background-color: #fafafa;
line-height: 1.6;
color: #555;
/* Adding a basic transition for unfolding (native details handles most animation) */
transition: all 0.3s ease-in-out;
}
>
Top 10 Questions About the Moon
1. Why does the Moon appear to change shape (phases)?
The Moon's shape appears to change becauseas it orbits Earththe Sun lights up different parts of its surfaceand we only see the portion that is illuminated from our perspective. The Moon is always half-lit by the Sun (except during eclipses)but our view of that sunlit half changes.
2. Does the Moon rotate?
Yesthe Moon rotates on its axisbut it does so at the same rate that it orbits Earth (a phenomenon called tidal locking). This is why we only ever see the same side (the near side) of the Moon from Earth.
3. Is there a "dark side" of the Moon?
Nothere isn't a permanently "dark side". The far side of the Moon gets just as much sunlight as the near side. Like Earththe Moon has both a day and nightwhich change as it rotatesmeaning all sides get sunlight at some point.
4. How was the Moon formed?
The leading theory is the giant-impact hypothesis. This suggests that a Mars-sized rocky body (often called Theia) collided with the early Earth billions of years ago. The debris from this massive impact eventually came together in orbit to form the Moon.
5. How does the Moon affect Earth's ocean tides?
The Moon's gravity creates bulges in the Earth's oceanspulling the water toward it. The Earth rotates under these bulgescausing the regular rise and fall of ocean levels known as tides. The Sun also has a smaller effect on the tides.
6. Does the Moon produce its own light?
Nothe Moon does not produce its own light. The "moonlight" we see is actually sunlight reflecting off the Moon's rockydark gray surface.
7. How far away is the Moon?
On averagethe Moon is about **384,400 kilometers** (238,855 miles) away from Earth. This distance is enough that about 30 Earth-sized planets could fit in between Earth and the Moon.
8. Can you see the Moon during the day?
Yesyou can often see the Moon during the dayespecially during the quarter phases (first and last quarter). The brightness of the Moon and its position in the sky relative to the Sun make it visible against the blue daytime skyunlike much fainter stars.
9. How many people have walked on the Moon?
Only 12 peopleall menhave walked on the Moon. They were all American astronauts from NASA's Apollo missions between 1969 and 1972.
10. What would happen if there was no Moon?
Without the Moon's gravitational pullEarth would be a very different world. Tides would be minimal (caused only by the Sun)and our planet's axial tilt would be unstablepotentially leading to extreme and erratic climate changes over long periods.