.toggle-switch {
  --toggle-width: 6.2em;
  --toggle-height: 3em;
  --toggle-bg: #f1f1f1;
  --toggle-core: #000000;
  --toggle-glow: rgba(249, 115, 22, 0.65);
  --toggle-sun: #f97316;
  --toggle-shadow: rgba(0, 0, 0, 0.5);
  --toggle-chrome: #e5e7eb;
  --toggle-reflect: rgba(255, 255, 255, 0.35);
  font-size: 16px;
  position: relative;
  display: inline-block;
  width: var(--toggle-width);
  height: var(--toggle-height);
  cursor: pointer;
  user-select: none;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--toggle-bg);
  border-radius: 1.5em;
  transition:
    background 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  padding: 0.25em;
  box-shadow:
    inset 0 5px 10px var(--toggle-shadow),
    0 3px 6px var(--toggle-shadow);
  overflow: hidden;
}

.celestial-core {
  position: relative;
  width: calc(var(--toggle-height) - 0.5em);
  height: calc(var(--toggle-height) - 0.5em);
  background: var(--toggle-core);
  border-radius: 50%;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
    margin 0.1s ease-out;
  transform: translateX(0);
  box-shadow:
    0 0 10px var(--toggle-shadow),
    inset 0 0 5px var(--toggle-shadow);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.celestial-icon {
  width: 90%;
  height: 90%;
  transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.moon-surface,
.moon-crater1,
.moon-crater2,
.moon-crater3,
.moon-crater4,
.moon-crater5 {
  transition:
    fill 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sun-core,
.sun-flare1,
.sun-flare2,
.heat-wave {
  transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.track-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 85% 50%,
    var(--toggle-glow) 15%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 1;
}

.metal-track {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid var(--toggle-chrome);
  border-radius: 1.5em;
  box-shadow:
    inset 0 0 6px var(--toggle-chrome),
    0 0 4px var(--toggle-glow),
    0 0 8px #9ca3af;
  opacity: 0.95;
  transition:
    opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 0;
}

.reflection-effect {
  position: absolute;
  width: 100%;
  height: 60%;
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--toggle-reflect),
    transparent 80%
  );
  opacity: 0.6;
  transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 1;
}

.shadow-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 20% 50%,
    rgba(21, 21, 21, 0.4) 0%,
    transparent 60%
  );
  opacity: 0.5;
  transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: 0;
}

.click-feedback {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.25) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.15s ease-out;
  z-index: 3;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--toggle-sun);
  box-shadow:
    inset 0 5px 10px var(--toggle-shadow),
    0 0 15px var(--toggle-glow);
}

.toggle-switch input:checked + .toggle-slider .celestial-core {
  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
  box-shadow:
    0 0 15px var(--toggle-sun),
    inset 0 0 5px var(--toggle-shadow);
  margin-top: -0.15em;
}

.toggle-switch input:checked + .toggle-slider .moon-surface {
  fill: url(#sunGradient);
}

.toggle-switch input:checked + .toggle-slider .moon-crater1,
.toggle-switch input:checked + .toggle-slider .moon-crater2,
.toggle-switch input:checked + .toggle-slider .moon-crater3,
.toggle-switch input:checked + .toggle-slider .moon-crater4,
.toggle-switch input:checked + .toggle-slider .moon-crater5 {
  fill: #dc2626;
  opacity: 0;
}

.toggle-switch input:checked + .toggle-slider .sun-core {
  opacity: 1;
}

.toggle-switch input:checked + .toggle-slider .sun-flare1,
.toggle-switch input:checked + .toggle-slider .sun-flare2 {
  opacity: 0.95;
}

.toggle-switch input:checked + .toggle-slider .heat-wave {
  opacity: 0.8;
}

.toggle-switch input:checked + .toggle-slider .moon-surface,
.toggle-switch input:checked + .toggle-slider .moon-crater1,
.toggle-switch input:checked + .toggle-slider .moon-crater2,
.toggle-switch input:checked + .toggle-slider .moon-crater3,
.toggle-switch input:checked + .toggle-slider .moon-crater4,
.toggle-switch input:checked + .toggle-slider .moon-crater5 {
  opacity: 0;
}

.toggle-switch input:checked + .toggle-slider .celestial-icon {
  color: #7c2d12;
}

.toggle-switch input:checked + .toggle-slider .track-glow {
  opacity: 0.9;
}

.toggle-switch input:checked + .toggle-slider .metal-track {
  opacity: 1;
  box-shadow:
    inset 0 0 6px var(--toggle-chrome),
    0 0 6px var(--toggle-glow),
    0 0 10px #9ca3af;
}

.toggle-switch input:checked + .toggle-slider .reflection-effect {
  opacity: 0.8;
}

.toggle-switch input:checked + .toggle-slider .shadow-effect {
  opacity: 0.7;
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow:
    inset 0 5px 10px var(--toggle-shadow),
    0 0 0 5px var(--toggle-glow);
}

.toggle-switch input:hover + .toggle-slider {
  background: #d1d5db;
}

.toggle-switch input:checked:hover + .toggle-slider {
  background: #dc2626;
}

.toggle-switch input:active + .toggle-slider .celestial-core {
  scale: 0.98;
  box-shadow: 0 0 18px var(--toggle-sun);
}

.toggle-switch input:active + .toggle-slider .click-feedback {
  opacity: 1;
  animation: click-pulse 0.2s ease-out;
}

.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(100%);
}

@keyframes click-pulse {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Celestial-Themed Toggle Switch Using HTML and CSS

If you’re looking to add a truly eye-catching toggle switch to your website — one that goes beyond the typical minimalist design — this celestial-themed toggle switch is a perfect choice. Built entirely with HTML and CSS, it features stunning animations and SVG graphics that transition between a moon and sun theme, giving users a visually immersive experience.

This toggle is not only beautiful but also accessible and responsive, making it ideal for dark/light mode toggles, celestial-themed web apps, or creative UI/UX projects.

What Makes This Toggle Special?

This is not your average on/off switch. The toggle features:

A detailed moon and sun SVG with animated craters and flares.
Rich gradients and glows for both light and dark states.
Smooth transitions with a celestial animation theme.
Click feedback and motion effects without JavaScript.

All the animations, color transitions, and icon changes are powered by CSS. The toggle is highly customizable with CSS variables, allowing you to tweak the style effortlessly.

Features at a Glance

1. Accessible Markup

The toggle includes a checkbox input with an aria-label, making it accessible to screen readers and compliant with modern web standards.

2. Sun and Moon Animation

The toggle’s slider contains a detailed SVG that switches between a moon and a sun based on the toggle state. Craters fade away, sun flares appear, and a heat wave animation begins when toggled on.

3. CSS Transitions and Effects

Each state change is powered by transform, opacity, and box-shadow transitions, producing a smooth morphing effect. There’s no JavaScript — just modern CSS with well-structured animation logic.

4. Click Pulse Animation

On user interaction, a brief “pulse” is triggered with a radial animation to simulate click feedback.

5. Customizable Variables

Using CSS custom properties, developers can easily modify:

Toggle dimensions
Background and glow colors
Transition speeds
SVG color stops and gradients

This makes it suitable for branding or thematic integration in your UI.

When Should You Use This Toggle?

This toggle is perfect for:

Light/Dark Mode Switches: With the moon and sun visuals, it’s a natural fit.
Gaming Dashboards: Especially in fantasy, sci-fi, or adventure-themed games.
Creative Portfolios: Designers and developers can use this to showcase interactive CSS skills.
Product Settings: Add a unique toggle experience in your SaaS or web app UI.

Performance and Compatibility

Despite its visual richness, this toggle is lightweight and performs smoothly across modern browsers. The use of SVG, radial-gradient, and hardware-accelerated transform ensures efficiency.

Browser Compatibility:

Chrome
Firefox
Edge
Safari
Mobile Browsers

Note: Older browsers may not support advanced gradient or animation properties. Always test accordingly.

Final Thoughts

This celestial toggle switch built with HTML and CSS proves that even functional UI elements can be artistic and engaging. It shows the power of modern CSS when combined with creativity and SVG.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.