Solar Eclipse Background
A total solar eclipse: the black moon sits in a halo of corona rays that shimmer as two ray layers turn in opposite directions, with a diamond ring glint pulsing at the rim.
Also known as: total eclipse css, sun corona background, eclipse animation css.
HTML
<div class="bgx-solar-eclipse" aria-hidden="true"><span></span><span></span><span></span></div>
CSS
.bgx-solar-eclipse {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 30%, #0b0f22), #020308 60%);}
.bgx-solar-eclipse span {
position: absolute;
top: 50%;
left: 50%;
width: var(--d);
height: var(--d);
margin: calc(var(--d) / -2);
border-radius: 50%;
}
.bgx-solar-eclipse span:nth-child(1),
.bgx-solar-eclipse span:nth-child(2) {
mask: radial-gradient(closest-side, #000 26%, rgb(0 0 0 / 0.4) 45%, transparent);
}
.bgx-solar-eclipse span:nth-child(1) {
--d: 18em;
background: repeating-conic-gradient(color-mix(in srgb, var(--c) 40%, #fff) 0 1.5deg, transparent 1.5deg 7deg);
animation: bgx-solar-eclipse-spin 40s linear infinite;
}
.bgx-solar-eclipse span:nth-child(2) {
--d: 14em;
background: repeating-conic-gradient(from 3deg, #fff 0 1deg, transparent 1deg 5deg);
opacity: 0.7;
animation: bgx-solar-eclipse-spin 28s linear infinite reverse;
}
.bgx-solar-eclipse span:nth-child(3) {
--d: 5.6em;
background: #020308;
box-shadow:
0 0 0 0.1em #fff,
0 0 0.8em 0.25em color-mix(in srgb, var(--c) 35%, #fff),
0 0 3em 1em color-mix(in srgb, var(--c) 40%, transparent);
}
.bgx-solar-eclipse span:nth-child(3)::after {
content: "";
position: absolute;
top: 12%;
left: 82%;
width: 1.4em;
height: 1.4em;
margin: -0.7em;
border-radius: 50%;
background: radial-gradient(closest-side, #fff 15%, color-mix(in srgb, var(--c) 20%, #fff) 30%, transparent);
animation: bgx-solar-eclipse-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes bgx-solar-eclipse-spin {
to { transform: rotate(360deg); }
}
@keyframes bgx-solar-eclipse-pulse {
50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-solar-eclipse, .bgx-solar-eclipse *, .bgx-solar-eclipse::before, .bgx-solar-eclipse::after, .bgx-solar-eclipse *::before, .bgx-solar-eclipse *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<div class="absolute inset-0 overflow-hidden bg-[radial-gradient(circle_at_50%_50%,#16204a,#020308_60%)] text-[16px]" aria-hidden="true">
<div class="absolute left-1/2 top-1/2 -ml-[9em] -mt-[9em] h-[18em] w-[18em] animate-[spin_40s_linear_infinite] rounded-full bg-[repeating-conic-gradient(#b1cdfb_0_1.5deg,transparent_1.5deg_7deg)] [mask:radial-gradient(closest-side,#000_26%,rgba(0,0,0,0.4)_45%,transparent)]"></div>
<div class="absolute left-1/2 top-1/2 -ml-[7em] -mt-[7em] h-[14em] w-[14em] animate-[spin_28s_linear_infinite_reverse] rounded-full bg-[repeating-conic-gradient(from_3deg,#fff_0_1deg,transparent_1deg_5deg)] opacity-70 [mask:radial-gradient(closest-side,#000_26%,rgba(0,0,0,0.4)_45%,transparent)]"></div>
<div class="absolute left-1/2 top-1/2 -ml-[2.8em] -mt-[2.8em] h-[5.6em] w-[5.6em] rounded-full bg-[#020308] shadow-[0_0_0_0.1em_#fff,0_0_0.8em_0.25em_#c3dafc,0_0_3em_1em_rgba(59,130,246,0.4)]">
<span class="absolute left-[82%] top-[12%] -ml-[0.7em] -mt-[0.7em] h-[1.4em] w-[1.4em] animate-pulse rounded-full bg-[radial-gradient(closest-side,#fff_15%,#d8e6fd_30%,transparent)]"></span>
</div>
</div>Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.