Herramienta gratis

Generador de Toggle Switch CSS

Interruptores animados sin una línea de JavaScript: checkbox accesible + pseudo-elemento animado. Ajusta todo y copia el código.

<label class="switch">
  <input type="checkbox" checked />
  <span class="slider"></span>
</label>

.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #cbd5e1;
  border-radius: 30px;
  transition: background 0.3s;
}

.slider::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.3s;
}

.switch input:checked + .slider {
  background: #7c3aed;
}

.switch input:checked + .slider::before {
  transform: translateX(26px);
}

Hecho por

Miguel Ángel Colorado Marin (MACM)

Full-Stack Developer · Guadalajara, España

Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.

GitHubLinkedInInvitar a un café
Contáctame

El interruptor on/off es uno de los componentes que más se reimplementan mal: librerías pesadas para lo que resuelven tres reglas de CSS. El patrón canónico usa un checkbox real (accesible con teclado y lectores de pantalla) visualmente oculto, un span que dibuja la pista y su pseudo-elemento ::before como perilla; el selector :checked + .slider desliza la perilla con transform. Esta herramienta genera ese HTML y ese CSS con tus medidas exactas —la perilla siempre sale proporcionada al alto— y tus colores de estado, con una demo funcional donde puedes alternar los interruptores antes de copiar. Al ser input nativo, sigue funcionando con Tab y Espacio sin JavaScript.

Características

  • ✓Sin JavaScript: patrón checkbox + label
  • ✓Tamaño libre con perilla proporcional automática
  • ✓Colores de encendido, apagado y perilla
  • ✓Duración de la transición ajustable
  • ✓Demo interactiva dentro de la herramienta

¿Cómo crear un toggle en CSS?

  1. 1

    Define tamaño y colores

    Ancho, alto y los tres colores del interruptor.

  2. 2

    Prueba la demo

    Alterna los interruptores de ejemplo para ver la animación.

  3. 3

    Copia HTML + CSS

    El botón copia ambos fragmentos juntos.

  4. 4

    Conecta tu lógica

    El checkbox sigue siendo un input normal: escucha change como siempre.

Preguntas frecuentes

¿Es accesible con teclado?

Sí: debajo del estilo hay un checkbox nativo, así que Tab lo enfoca y Espacio lo alterna. Puedes añadir estilos :focus-visible sobre .slider para un anillo de foco visible.

¿Por qué usar transform y no left?

transform: translateX anima en el compositor sin recalcular layout: a 60fps constantes incluso en móviles modestos, mientras animar left fuerza reflow por fotograma.

¿Puedo ponerlo dentro de un formulario?

Es un checkbox estándar: respeta name, value, required y disabled como cualquier otro input, y envía su valor al enviar el formulario.

Herramientas relacionadas

Generador de Neumorphism

Soft UI con doble sombra y ángulo de luz.

Generador de Loaders CSS

Spinners animados en CSS puro.

Generador de Glassmorphism

Efecto cristal con blur y transparencia.

Generador CSS Box Shadow

Sombras CSS con múltiples capas y vista previa en vivo.

Incrusta Generador de Toggle Switch CSS en tu web

Integra Generador de Toggle Switch CSS en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.

<iframe
  src="https://miguelacm.es/embed/css-toggle-switch-generator"
  width="100%"
  height="700"
  frameborder="0"
  title="Generador de Toggle Switch CSS — miguelacm.es"
></iframe>
Ver embed en nueva pestaña →
Ver código en GitHub