.cosmic-toggle {
  position: relative;
  width: 140px;
  height: 70px;
  transform-style: preserve-3d;
  perspective: 500px;
}

.toggle {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #1a1a2e, #16213e);
  border-radius: 35px;
  transition: 0.5s;
  transform-style: preserve-3d;
  box-shadow:
    0 0 20px rgba(0, 0, 0, 0.5),
    inset 0 0 15px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.cosmos {
  position: absolute;
  inset: 0;
  background: radial-gradient(1px 1px at 10% 10%, #fff 100%, transparent),
    radial-gradient(1px 1px at 20% 20%, #fff 100%, transparent),
    radial-gradient(2px 2px at 30% 30%, #fff 100%, transparent),
    radial-gradient(1px 1px at 40% 40%, #fff 100%, transparent),
    radial-gradient(2px 2px at 50% 50%, #fff 100%, transparent),
    radial-gradient(1px 1px at 60% 60%, #fff 100%, transparent),
    radial-gradient(2px 2px at 70% 70%, #fff 100%, transparent),
    radial-gradient(1px 1px at 80% 80%, #fff 100%, transparent),
    radial-gradient(1px 1px at 90% 90%, #fff 100%, transparent);
  background-size: 200% 200%;
  opacity: 0.1;
  transition: 0.5s;
}

.toggle-orb {
  position: absolute;
  height: 62px;
  width: 62px;
  left: 4px;
  bottom: 4px;
  background: linear-gradient(145deg, #ff6b6b, #4ecdc4);
  border-radius: 50%;
  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-style: preserve-3d;
  z-index: 2;
}

.inner-orb {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #e6e6e6);
  transition: 0.5s;
  overflow: hidden;
}

.inner-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0, 0, 0, 0.1) 10deg,
    transparent 20deg
  );
  animation: patternRotate 10s linear infinite;
}

.ring {
  position: absolute;
  inset: -3px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transition: 0.5s;
}

.toggle:checked + .slider {
  background: linear-gradient(45deg, #16213e, #1a1a2e);
}

.toggle:checked + .slider .toggle-orb {
  transform: translateX(70px) rotate(360deg);
  background: linear-gradient(145deg, #4ecdc4, #45b7af);
}

.toggle:checked + .slider .inner-orb {
  background: linear-gradient(145deg, #45b7af, #3da89f);
  transform: scale(0.9);
}

.toggle:checked + .slider .ring {
  border-color: rgba(78, 205, 196, 0.3);
  animation: ringPulse 2s infinite;
}

.energy-line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(78, 205, 196, 0.5),
    transparent
  );
  transform-origin: left;
  opacity: 0;
  transition: 0.5s;
}

.energy-line:nth-child(1) {
  top: 20%;
  transform: rotate(15deg);
}
.energy-line:nth-child(2) {
  top: 50%;
  transform: rotate(0deg);
}
.energy-line:nth-child(3) {
  top: 80%;
  transform: rotate(-15deg);
}

.toggle:checked + .slider .energy-line {
  opacity: 1;
  animation: energyFlow 2s linear infinite;
}

.particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #4ecdc4;
  border-radius: 50%;
  opacity: 0;
}

.toggle:checked + .slider .particle {
  animation: particleBurst 1s ease-out infinite;
}

.particle:nth-child(1) {
  left: 20%;
  animation-delay: 0s;
}
.particle:nth-child(2) {
  left: 40%;
  animation-delay: 0.2s;
}
.particle:nth-child(3) {
  left: 60%;
  animation-delay: 0.4s;
}
.particle:nth-child(4) {
  left: 80%;
  animation-delay: 0.6s;
}
.particle:nth-child(5) {
  left: 30%;
  animation-delay: 0.8s;
}
.particle:nth-child(6) {
  left: 70%;
  animation-delay: 1s;
}

/* Анимации */
@keyframes ringPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.6;
  }
}

@keyframes patternRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes energyFlow {
  0% {
    transform: scaleX(0) translateX(0);
    opacity: 0;
  }
  50% {
    transform: scaleX(1) translateX(50%);
    opacity: 1;
  }
  100% {
    transform: scaleX(0) translateX(100%);
    opacity: 0;
  }
}

@keyframes particleBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(cos(var(--angle)) * 50px),
        calc(sin(var(--angle)) * 50px)
      )
      scale(0);
    opacity: 0;
  }
}

/* Hover эффекты */
.slider:hover .toggle-orb {
  filter: brightness(1.2);
  box-shadow:
    0 0 20px rgba(78, 205, 196, 0.5),
    0 0 40px rgba(78, 205, 196, 0.3);
}

.slider:hover .cosmos {
  opacity: 0.2;
  animation: cosmosPan 20s linear infinite;
}

@keyframes cosmosPan {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 200%;
  }
}

/* Активное состояние */
.toggle:active + .slider .toggle-orb {
  transform: scale(0.95);
}

/* 3D эффект при наведении */
.cosmic-toggle:hover .slider {
  transform: rotateX(10deg) rotateY(10deg);
}

.cosmic-toggle:hover .toggle-orb {
  transform: translateZ(10px);
}

/* Тень */
.toggle:checked + .slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--x) var(--y),
    rgba(78, 205, 196, 0.2),
    transparent 50%
  );
  opacity: 0;
  animation: glowFollow 2s linear infinite;
}

@keyframes glowFollow {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Cosmic Toggle Switch with HTML & CSS – Futuristic UI Design

Looking to add an out-of-this-world toggle switch to your website? This Cosmic Toggle Switch built using only HTML and CSS is an incredible blend of animation, color, and interaction — designed to impress your users.

Inspired by sci-fi aesthetics, it uses 3D effects, glowing energy lines, rotating inner orbs, and particle bursts to give your UI a futuristic upgrade. No JavaScript required.

What is a Cosmic Toggle Switch?

A toggle switch is a common UI component used to turn settings on or off. The Cosmic Toggle Switch takes that idea to the next level. It’s not just functional — it’s visually stunning.

With just a checkbox and CSS, this switch mimics energy surges, moving galaxies, and animated orbits to make every click feel powerful.

Features and Effects

1. 3D and Perspective Design

Using transform-style: preserve-3d and perspective on the main container, the toggle gets a realistic depth effect when hovered — simulating a rotating galaxy.

2. Animated Toggle Orb

The toggle orb is circular, gradient-filled, and layered with:

A glowing inner orb
A rotating pattern effect
A pulsing outer ring

When switched, the orb slides to the opposite side and rotates, enhancing user feedback.

3. Energy Lines

Three animated horizontal lines pulse with energy when the toggle is active. These lines simulate plasma bursts, giving the interface a dynamic power surge effect.

4. Particles and Cosmic Glow

Tiny animated particles burst outward on toggle, controlled by custom angles. Additionally, a soft star-field background fades in and out, making it feel like the switch is part of space.

5. Interactive Hover Effects

Hovering the slider enhances brightness and depth with glowing shadows, adding interactivity and responsiveness to user actions.

How It Works

The toggle uses a hidden <input type="checkbox"> element.
A <label> styled as .cosmic-toggle acts as the visible control.
CSS selectors like :checked + .slider are used to animate different parts based on the switch state.
Advanced animations use keyframes such as:
- patternRotate – rotates the orb’s pattern.
- ringPulse – creates a pulsing glow.
- particleBurst – shoots particles in multiple directions.
- energyFlow – animates energy lines horizontally.
- cosmosPan – scrolls the starry background for realism.

Why Use This Toggle?

This toggle isn’t just stylish — it:

Enhances visual appeal on modern websites
Engages users with micro-interactions
Runs smoothly without JavaScript
Is fully responsive and customizable

Perfect for:

Dark mode switches
Tech or sci-fi-themed websites
Creative portfolios
Interactive dashboards

Customize It Your Way

You can change:

Colors and gradients for your brand
Orb size and toggle speed
Background star patterns
Particle count and angles

Everything is handled through CSS variables and clean structure.

Final Thoughts

The Cosmic Toggle Switch is a perfect example of how far CSS can go in modern web design. With layered animation, interactivity, and a futuristic look, it’s a valuable addition to any creative web project.

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.