Sun and Moon Icon Toggle
An icon-only theme button: the sun's rays spin and shrink away, the disc swells and a bite slides in to leave a crescent. The rays are one conic gradient cut into a ring with a mask.
Also known as: sun moon toggle, theme toggle icon css, light dark icon button.
HTML
<label class="tgl-sun-moon-toggle">
<input type="checkbox" role="switch" aria-label="Dark theme">
<span class="tgl-sun-moon-toggle-btn" aria-hidden="true">
<span class="tgl-sun-moon-toggle-rays"></span>
<span class="tgl-sun-moon-toggle-core"></span>
<span class="tgl-sun-moon-toggle-bite"></span>
</span>
</label>CSS
.tgl-sun-moon-toggle {
--c: var(--tgl-color, #3b82f6);
font-size: var(--tgl-size, 24px);
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.tgl-sun-moon-toggle input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tgl-sun-moon-toggle-btn {
--bg: color-mix(in srgb, var(--c) 12%, #fff);
position: relative;
display: grid;
place-items: center;
width: 3em;
height: 3em;
border-radius: 50%;
overflow: hidden;
color: #f59e0b;
background: var(--bg);
box-shadow: 0 0.12em 0.35em rgba(15, 23, 42, 0.18), inset 0 0 0 1px rgba(15, 23, 42, 0.08);
transition: background-color 0.5s ease, color 0.5s ease;
}
.tgl-sun-moon-toggle-rays,
.tgl-sun-moon-toggle-core,
.tgl-sun-moon-toggle-bite {
position: absolute;
border-radius: 50%;
}
/* eight rays: a conic gradient masked down to a ring */
.tgl-sun-moon-toggle-rays {
width: 2.1em;
height: 2.1em;
background: repeating-conic-gradient(from -6deg, currentColor 0 12deg, transparent 0 45deg);
-webkit-mask: radial-gradient(circle, transparent 0.66em, #000 0.68em 1em, transparent 1.02em);
mask: radial-gradient(circle, transparent 0.66em, #000 0.68em 1em, transparent 1.02em);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}
.tgl-sun-moon-toggle-core {
width: 1em;
height: 1em;
background: currentColor;
transition: transform 0.5s cubic-bezier(0.4, 1.5, 0.5, 1);
}
.tgl-sun-moon-toggle-bite {
width: 1.15em;
height: 1.15em;
background: var(--bg);
transform: translate(1.7em, -1.7em);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.5s ease;
}
.tgl-sun-moon-toggle input:checked + .tgl-sun-moon-toggle-btn {
--bg: color-mix(in srgb, var(--c) 25%, #0f172a);
color: #fde68a;
}
.tgl-sun-moon-toggle input:checked + .tgl-sun-moon-toggle-btn .tgl-sun-moon-toggle-rays {
transform: rotate(90deg) scale(0.5);
opacity: 0;
}
.tgl-sun-moon-toggle input:checked + .tgl-sun-moon-toggle-btn .tgl-sun-moon-toggle-core { transform: scale(1.55); }
.tgl-sun-moon-toggle input:checked + .tgl-sun-moon-toggle-btn .tgl-sun-moon-toggle-bite { transform: translate(0.42em, -0.38em); }
.tgl-sun-moon-toggle:hover .tgl-sun-moon-toggle-rays { transform: rotate(22.5deg); }
.tgl-sun-moon-toggle input:focus-visible + .tgl-sun-moon-toggle-btn {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
.tgl-sun-moon-toggle, .tgl-sun-moon-toggle *, .tgl-sun-moon-toggle::before, .tgl-sun-moon-toggle::after, .tgl-sun-moon-toggle *::before, .tgl-sun-moon-toggle *::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.
<label class="group relative inline-flex cursor-pointer">
<input type="checkbox" role="switch" aria-label="Dark theme" class="peer sr-only">
<span aria-hidden="true" class="relative grid h-12 w-12 place-items-center overflow-hidden rounded-full bg-blue-50 text-amber-500 shadow-md ring-1 ring-slate-900/10 transition-colors duration-500 peer-checked:bg-slate-800 peer-checked:text-amber-200 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-blue-500">
<span class="absolute h-[2.1rem] w-[2.1rem] rounded-full bg-[repeating-conic-gradient(from_-6deg,currentColor_0_12deg,transparent_0_45deg)] transition duration-500 [mask:radial-gradient(circle,transparent_0.66rem,#000_0.68rem_1rem,transparent_1.02rem)] group-hover:rotate-[22.5deg] group-has-[:checked]:rotate-90 group-has-[:checked]:scale-50 group-has-[:checked]:opacity-0"></span>
<span class="absolute h-4 w-4 rounded-full bg-current transition-transform duration-500 ease-[cubic-bezier(.4,1.5,.5,1)] group-has-[:checked]:scale-[1.55]"></span>
<span class="absolute h-[1.15rem] w-[1.15rem] -translate-y-[1.7rem] translate-x-[1.7rem] rounded-full bg-blue-50 transition duration-500 group-has-[:checked]:-translate-y-[0.38rem] group-has-[:checked]:translate-x-[0.42rem] group-has-[:checked]:bg-slate-800"></span>
</span>
</label>Customizing this snippet
- Color: set
--tgl-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--tgl-size. Every other dimension is inem, so the whole thing scales together. Currently previewing24px. - 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.