.toggle-cont {
  --primary: #54a8fc;
  --light: #d9d9d9;
  --dark: #121212;
  --gray: #414344;

position: relative;
  z-index: 10;

width: fit-content;
  height: 50px;

border-radius: 9999px;
}

.toggle-cont .toggle-input {
  display: none;
}

.toggle-cont .toggle-label {
  --gap: 5px;
  --width: 50px;

cursor: pointer;

position: relative;
  display: inline-block;

padding: 0.5rem;
  width: calc((var(--width) + var(--gap)) * 2);
  height: 100%;
  background-color: var(--dark);

border: 1px solid #777777;
  border-bottom: 0;

border-radius: 9999px;
  box-sizing: content-box;
  transition: all 0.3s ease-in-out;
}
.toggle-label::before {
  content: "";

position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

width: calc(100% + 1.5rem);
  height: calc(100% + 1.5rem);
  background-color: var(--gray);

border: 1px solid #777777;
  border-bottom: 0;
  border-radius: 9999px;

transition: all 0.3s ease-in-out;
}
.toggle-label::after {
  content: "";

position: absolute;
  z-index: -10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

width: 100%;
  height: 100%;
  background-image: radial-gradient(
    circle at 50% -100%,
    rgb(58, 155, 252) 0%,
    rgba(12, 12, 12, 1) 80%
  );

border-radius: 9999px;
}

.toggle-cont .toggle-label .cont-icon {
  position: relative;

display: flex;
  justify-content: center;
  align-items: center;

position: relative;
  width: var(--width);
  height: 50px;
  background-image: radial-gradient(
    circle at 50% 0%,
    #666666 0%,
    var(--gray) 100%
  );

border: 1px solid #aaaaaa;
  border-bottom: 0;
  border-radius: 9999px;
  box-shadow: inset 0 -0.15rem 0.15rem var(--primary),
    inset 0 0 0.5rem 0.75rem var(--second);

transition: transform 0.3s ease-in-out;
}

.cont-icon {
  overflow: clip;
  position: relative;
}

.cont-icon .sparkle {
  position: absolute;
  top: 50%;
  left: 50%;

display: block;

width: calc(var(--width) * 1px);
  aspect-ratio: 1;
  background-color: var(--light);

border-radius: 50%;
  transform-origin: 50% 50%;
  rotate: calc(1deg * var(--deg));
  transform: translate(-50%, -50%);
  animation: sparkle calc(100s / var(--duration)) linear
    calc(0s / var(--duration)) infinite;
}

@keyframes sparkle {
  to {
    width: calc(var(--width) * 0.5px);
    transform: translate(2000%, -50%);
  }
}

.cont-icon .icon {
  width: 1.1rem;
  fill: var(--light);
}

.toggle-cont:has(.toggle-input:checked) {
  --checked: true;
}

@container style(--checked: true) {
  .toggle-cont .toggle-label {
    background-color: #41434400;

border: 1px solid #3d6970;
    border-bottom: 0;
  }

.toggle-cont .toggle-label::before {
    box-shadow: 0 1rem 2.5rem -2rem #0080ff;
  }

.toggle-cont .toggle-label .cont-icon {
    overflow: visible;

background-image: radial-gradient(
      circle at 50% 0%,
      #045ab1 0%,
      var(--primary) 100%
    );

border: 1px solid var(--primary);
    border-bottom: 0;

transform: translateX(calc((var(--gap) * 2) + 100%)) rotate(-225deg);
  }

.toggle-cont .toggle-label .cont-icon .sparkle {
    z-index: -10;

width: calc(var(--width) * 1.5px);
    background-color: #acacac;

animation: sparkle calc(100s / var(--duration)) linear
      calc(10s / var(--duration)) infinite;
  }

@keyframes sparkle {
    to {
      width: calc(var(--width) * 1px);
      transform: translate(5000%, -50%);
    }
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Sparkle Toggle Switch Animation with HTML & CSS

Looking to add some futuristic flair to your interface? This animated sparkle toggle switch is a perfect blend of creativity and clean UI design — built entirely with HTML and CSS.

This component mimics a high-tech button with rotating sparkles, gradient glow, and a sliding toggle effect, making it ideal for modern dashboards, tech product pages, or dark-themed sites.

What Is a Sparkle Toggle Switch?

This toggle switch is not just functional — it’s animated and engaging:

When unchecked, the toggle sits neatly in place with a neutral background and subtle glow.
On hover and toggle, a burst of sparkling particles orbit and shift outward in a circular direction.
The toggle slider glides across with a slick rotating effect and color change.
It uses no JavaScript — everything is pure HTML and CSS.

Key Features

1. Minimal HTML Structure

The core structure consists of:

A checkbox (input) that acts as the toggle control.
A label element styled as the switch container.
An SVG icon centered within the toggle knob.
Multiple span elements styled as sparkles, each with unique rotation degrees, animation speeds, and sizes.

2. CSS Magic Behind the Scene

Here’s what makes it dynamic:

Custom properties (--deg, --duration, --width) allow each sparkle to have its unique movement.
The sparkles animate infinitely using keyframes, giving a rotating particle trail effect.
On toggle (:checked state), the knob slides across, spins, and changes background color and border.
@container queries are used for modern styling — responding to custom conditions like a toggle being active.

3. Animated Backgrounds & Shadows

Both the switch container and knob change gradient backgrounds and shadows when toggled. These transitions enhance visual feedback.

Where Can You Use This?

This sparkle toggle switch is best for:

Dark UI themes and futuristic designs
Settings panels or feature toggles
Game menus or dashboard interfaces
Creative websites and portfolio pages

Why It’s Great

No JavaScript required
Smooth, scalable animation with keyframes and variables
Highly customizable: You can tweak the speed, colors, shape, and movement
Built with modern CSS including container queries and variables

Final Thoughts

The sparkle toggle switch is more than a UI element — it’s an experience. With subtle gradients, rotating animations, and interactive feedback, it can transform a standard checkbox into something delightful and dynamic.

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.