.neo-toggle-container {
  --toggle-width: 80px;
  --toggle-height: 38px;
  --toggle-bg: #181c20;
  --toggle-off-color: #475057;
  --toggle-on-color: #36f9c7;
  --toggle-transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);

position: relative;
  display: inline-flex;
  flex-direction: column;
  font-family: "Segoe UI", Tahoma, sans-serif;
  user-select: none;
}

.neo-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.neo-toggle {
  position: relative;
  width: var(--toggle-width);
  height: var(--toggle-height);
  display: block;
  cursor: pointer;
  transform: translateZ(0);
  perspective: 500px;
}

/* Track styles */
.neo-track {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--toggle-height) / 2);
  overflow: hidden;
  transform-style: preserve-3d;
  transform: translateZ(-1px);
  transition: transform var(--toggle-transition);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.neo-background-layer {
  position: absolute;
  inset: 0;
  background: var(--toggle-bg);
  background-image: linear-gradient(
    -45deg,
    rgba(20, 20, 20, 0.8) 0%,
    rgba(30, 30, 30, 0.3) 50%,
    rgba(20, 20, 20, 0.8) 100%
  );
  opacity: 1;
  transition: all var(--toggle-transition);
}

.neo-grid-layer {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to right,
      rgba(71, 80, 87, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(71, 80, 87, 0.05) 1px, transparent 1px);
  background-size: 5px 5px;
  opacity: 0;
  transition: opacity var(--toggle-transition);
}

.neo-track-highlight {
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--toggle-height) / 2);
  background: linear-gradient(90deg, transparent, rgba(54, 249, 199, 0));
  opacity: 0;
  transition: all var(--toggle-transition);
}

/* Spectrum analyzer */
.neo-spectrum-analyzer {
  position: absolute;
  bottom: 6px;
  right: 10px;
  height: 10px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--toggle-transition);
}

.neo-spectrum-bar {
  width: 2px;
  height: 3px;
  background-color: var(--toggle-on-color);
  opacity: 0.8;
}

/* Thumb styles */
.neo-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transform-style: preserve-3d;
  transition: transform var(--toggle-transition);
  z-index: 1;
}

.neo-thumb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--toggle-off-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: all var(--toggle-transition);
}

.neo-thumb-core {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
  transition: all var(--toggle-transition);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.neo-thumb-icon {
  position: relative;
  width: 10px;
  height: 10px;
  transition: all var(--toggle-transition);
}

.neo-thumb-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background: var(--toggle-off-color);
  transform: translate(-50%, -50%);
  transition: all var(--toggle-transition);
}

.neo-thumb-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--toggle-off-color);
  transform: scale(0);
  opacity: 0;
  transition: all var(--toggle-transition);
}

/* Gesture area */
.neo-gesture-area {
  position: absolute;
  inset: -10px;
  z-index: 0;
}

/* Interaction feedback */
.neo-interaction-feedback {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.neo-ripple {
  position: absolute;
  top: 50%;
  left: 30%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--toggle-on-color) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.4s ease-out;
}

.neo-progress-arc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--toggle-on-color);
  transform: translate(-50%, -50%) scale(0) rotate(0deg);
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.5s ease;
}

/* Status indicator */
.neo-status {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.neo-status-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
}

.neo-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--toggle-off-color);
  transition: all var(--toggle-transition);
}

.neo-status-text {
  font-size: 9px;
  font-weight: 600;
  color: var(--toggle-off-color);
  letter-spacing: 1px;
  transition: all var(--toggle-transition);
}

/* Value display */
.neo-value-display {
  position: absolute;
  top: -22px;
  right: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--toggle-off-color);
  opacity: 0;
  transform: translateY(5px);
  transition: all var(--toggle-transition);
}

.neo-value-text {
  transition: all var(--toggle-transition);
}

/* Active states */

/* ON state */
.neo-toggle-input:checked + .neo-toggle .neo-thumb {
  transform: translateX(calc(var(--toggle-width) - 38px));
}

.neo-toggle-input:checked + .neo-toggle .neo-thumb-ring {
  background-color: var(--toggle-on-color);
  border-color: rgba(54, 249, 199, 0.3);
  box-shadow: 0 0 15px rgba(54, 249, 199, 0.5);
}

.neo-toggle-input:checked + .neo-toggle .neo-thumb-wave {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #fff;
}

.neo-toggle-input:checked + .neo-toggle .neo-thumb-pulse {
  transform: scale(1.2);
  opacity: 0.3;
  animation: neo-pulse 1.5s infinite;
}

.neo-toggle-input:checked + .neo-toggle .neo-track-highlight {
  background: linear-gradient(90deg, transparent, rgba(54, 249, 199, 0.2));
  opacity: 1;
}

.neo-toggle-input:checked + .neo-toggle .neo-grid-layer {
  opacity: 1;
}

.neo-toggle-input:checked + .neo-toggle .neo-spectrum-analyzer {
  opacity: 1;
}

.neo-toggle-input:checked + .neo-toggle .neo-spectrum-bar:nth-child(1) {
  animation: neo-spectrum 0.9s infinite;
}

.neo-toggle-input:checked + .neo-toggle .neo-spectrum-bar:nth-child(2) {
  animation: neo-spectrum 0.8s 0.1s infinite;
}

.neo-toggle-input:checked + .neo-toggle .neo-spectrum-bar:nth-child(3) {
  animation: neo-spectrum 1.1s 0.2s infinite;
}

.neo-toggle-input:checked + .neo-toggle .neo-spectrum-bar:nth-child(4) {
  animation: neo-spectrum 0.7s 0.1s infinite;
}

.neo-toggle-input:checked + .neo-toggle .neo-spectrum-bar:nth-child(5) {
  animation: neo-spectrum 0.9s 0.15s infinite;
}

.neo-toggle-input:checked + .neo-toggle .neo-status-dot {
  background-color: var(--toggle-on-color);
  box-shadow: 0 0 8px var(--toggle-on-color);
}

.neo-toggle-input:checked + .neo-toggle .neo-status-text {
  color: var(--toggle-on-color);
  content: "ACTIVE";
}

.neo-toggle-input:checked + .neo-toggle + .neo-value-display {
  opacity: 1;
  transform: translateY(0);
}

.neo-toggle-input:checked + .neo-toggle + .neo-value-display .neo-value-text {
  color: var(--toggle-on-color);
}

/* Hover effects */
.neo-toggle:hover .neo-thumb-ring {
  transform: scale(1.05);
}

.neo-toggle-input:not(:checked) + .neo-toggle:hover .neo-thumb-wave::before,
.neo-toggle-input:not(:checked) + .neo-toggle:hover .neo-thumb-wave::after {
  opacity: 1;
}

/* Drag gesture handling */
.neo-toggle.neo-dragging .neo-track {
  transform: translateZ(-1px) scale(1.02);
}

.neo-toggle.neo-dragging .neo-thumb {
  transition: none;
}

/* Animations */
@keyframes neo-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.2;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

@keyframes neo-spectrum {
  0% {
    height: 3px;
  }
  50% {
    height: 8px;
  }
  100% {
    height: 3px;
  }
}

/* Custom script to enable advance features */
.neo-toggle.neo-activated .neo-ripple {
  width: 100px;
  height: 100px;
  opacity: 0.5;
  transition: all 0.6s ease-out;
}

.neo-toggle.neo-progress .neo-progress-arc {
  opacity: 0.8;
  transform: translate(-50%, -50%) scale(1) rotate(270deg);
  transition:
    opacity 0.3s ease,
    transform 1s ease;
}

/* Status text change */
.neo-toggle-input:checked + .neo-toggle .neo-status-text::before {
  content: "ACTIVE";
}

.neo-toggle-input:not(:checked) + .neo-toggle .neo-status-text::before {
  content: "STANDBY";
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Neo Spectrum Toggle Switch Using Pure HTML & CSS – Futuristic UI Design

Looking to add a futuristic, tech-inspired toggle switch to your website? This Neo Spectrum Toggle Switch is the perfect blend of advanced visual effects and pure CSS creativity — no JavaScript required.

Designed with glowing animations, a pulse effect, status indicators, and even a dynamic spectrum analyzer, this toggle is ideal for websites, dashboards, or apps that want to stand out with interactive UI elements.

What Is the Neo Spectrum Toggle Switch?

This switch is more than just a UI component — it’s a complete experience:

Futuristic look with neon glow and pulse effects.
Live status indicator that displays “STANDBY” or “ACTIVE” dynamically.
Spectrum analyzer bars that animate when the toggle is active.
Fully responsive and customizable using CSS variables.
Built entirely with HTML and CSS (no JS dependency).

Key Features

1. Track & Thumb Design

The track uses layers with gradients and shadows to create depth.
The thumb glides across the track with a smooth animation.
When toggled ON, the thumb changes color and emits a pulse glow effect.

2. Spectrum Visualizer

A row of animated bars appears when the toggle is turned ON.
Each bar animates with different delays, simulating a real-time spectrum effect.

3. Status Text Display

Below the switch, a text label updates automatically based on the toggle state.
The label fades between STANDBY and ACTIVE, with matching glow colors.

4. Ripple and Progress Effects

When activated, a subtle ripple animation radiates from the switch.
An optional progress arc can be displayed during long actions.

Why This Toggle Is Special

Unlike basic switches, this toggle includes:

CSS @keyframes animations for pulse and spectrum motion.
3D-like depth using transform-style: preserve-3d and perspective.
::before pseudo-elements for dynamic label text without JavaScript.
Custom properties for easy theme changes: --toggle-on-color, --toggle-off-color, and more.

Use Cases

This toggle switch is ideal for:

Music player UI designs
Developer dashboards and control panels
Audio/visual toggles on futuristic-themed websites
Creative portfolios with interactive elements

Final Thoughts

This Neo Spectrum Toggle showcases just how powerful HTML and CSS have become in creating interactive UI without relying on JavaScript libraries. Whether you’re building a dark-mode switch, enabling features in a dashboard, or just adding a stylish control element, this component will make your site feel high-tech and engaging.

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.