CodeKitHub¿Qué es esta herramienta?
Un interruptor CSS es un checkbox estilizado para verse y comportarse como un interruptor físico de encendido/apagado — una pista en forma de píldora con un círculo que se desliza de un lado a otro. Por dentro sigue siendo un input checkbox real, algo importante: mantiene el control accesible por teclado, utilizable con lectores de pantalla y compatible con el envío de formularios, a diferencia de un interruptor construido solo con divs clicables.
Esta herramienta construye ese patrón por ti: un checkbox oculto, una pista que cambia de color según :checked, y un círculo que se desliza usando una transformación CSS. Ajusta los controles y selectores de color, haz clic en la vista previa para probar la animación real y copia tanto el CSS como el marcado HTML mínimo del que depende.
Fuente: WAI-ARIA Authoring Practices, W3C — recomienda un input checkbox real como base accesible para un control de tipo interruptor, por lo que la salida de este generador conserva el elemento input subyacente.
¿Por qué utilizarlo?
- La vista previa es un interruptor real y clicable — no una imagen estática — así que puedes probar la animación exacta antes de usarla.
- Genera tanto el CSS como la estructura HTML accesible (input checkbox + label) de la que depende el CSS.
- Control total sobre ancho/alto de la pista, color en apagado, color en encendido, color del círculo, redondeo de esquinas y velocidad de transición.
- Usa el patrón estándar checkbox + selector :checked, así que el interruptor sigue siendo navegable por teclado y funciona dentro de formularios reales.
- Se ejecuta enteramente en tu navegador — nada de lo que configuras se sube a ningún sitio.
- Gratis, sin registro, funciona en móvil.
Cómo utilizarlo
- Define ancho y alto para dimensionar la pista — el círculo se dimensiona automáticamente para encajar con un pequeño margen interno.
- Elige el color del estado apagado (sin marcar) de la pista, y el color del estado encendido cuando se activa.
- Elige un color para el círculo — el blanco o un neutro claro suele dar el mayor contraste frente a la pista.
- Pon el radio de borde en 50% para un interruptor clásico en forma de píldora, o bájalo para un rectángulo ligeramente redondeado.
- Ajusta la velocidad de transición para controlar qué tan rápido se desliza el círculo y cambia el color de la pista entre estados.
- Haz clic en el interruptor de la vista previa para confirmar que la animación se ve bien, y luego copia el CSS y el HTML a tu proyecto.
Ejemplo
Entrada
Ancho: 52px · Alto: 28px · Color apagado: #cbd5e1 · Color encendido: #ea580c · Radio: 50% · Velocidad: 200msResultado
.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }El núcleo del patrón: el estado :checked del checkbox, combinado con el selector de hermano general (~), controla tanto el color de fondo de la pista como la distancia de deslizamiento del círculo.
Por qué un checkbox y no un div con un manejador de clic
Es tentador construir un interruptor con dos elementos <div> y un poco de JavaScript que cambia una clase al hacer clic, pero ese enfoque suele romper la navegación por teclado, los anuncios de lectores de pantalla y el envío de formularios — un checkbox real resuelve las tres cosas de forma gratuita. El patrón que genera esta herramienta mantiene el <input type="checkbox"> como el elemento interactivo real (oculto visualmente pero aún enfocable), y usa CSS puro — sin nada de JavaScript — para estilizar la pista y el círculo según el estado nativo :checked del checkbox.
Estilos de interruptor comunes
- Interruptor de píldora clásico: radio de borde al 50%, tamaño moderado (48–56px de ancho), un cambio de color claro entre encendido/apagado.
- Interruptor de panel de ajustes: tamaño más pequeño (36–44px de ancho), color apagado apagado (gris claro) frente a un estado encendido con el color de marca.
- Interruptor ligeramente redondeado: radio de borde alrededor del 20–30% en lugar de una píldora completa, para un aspecto más rectangular tipo app.
- Interruptor rápido y ágil: velocidad de transición de 100–150ms se siente inmediata y responsiva.
- Interruptor lento y deliberado: velocidad de transición de 300–400ms se percibe más suave y pulida, útil para un único interruptor de ajuste destacado.
Combínalo con otras herramientas CSS
La pista y el círculo generados ya usan border-radius internamente, así que si quieres una variante cuadrada o con un redondeo distinto al que ofrece el control deslizante, el Generador de Border Radius te permite ajustar cada esquina de forma independiente antes de pegar el valor. El Generador de Box Shadow es útil para añadir una sombra sutil al círculo y darle más profundidad.
Preguntas frecuentes
¿Por qué el resultado incluye HTML y no solo CSS?
Un interruptor no es puramente visual — depende de un <input type="checkbox"> real envuelto en un <label>, más los elementos de pista y círculo a los que apunta el CSS. Sin esa estructura exacta, los selectores basados en :checked del CSS generado no tendrían nada a lo que adherirse, así que ambas partes se copian juntas.
¿Este interruptor es accesible?
Sí — como el elemento interactivo es un checkbox real (solo oculto visualmente con una técnica que lo mantiene en el árbol de accesibilidad, no con display:none), sigue siendo enfocable con Tab, activable con Espacio o Enter, y correctamente anunciado por lectores de pantalla como un checkbox en su estado actual marcado/sin marcar.
¿Puedo usarlo dentro de un formulario HTML real?
Sí. Como el elemento subyacente es un input checkbox estándar, puedes darle un atributo name y value y se enviará como cualquier otro checkbox — los interruptores marcados envían su valor, los sin marcar se omiten, exactamente igual que un checkbox normal.
¿Por qué el círculo se mueve con transform en lugar de cambiar su posición left?
Animar transform: translateX() lo gestiona el compositor del navegador y se mantiene fluido incluso en dispositivos de gama baja, mientras que animar left provoca un recálculo de layout en cada fotograma. Por eso el CSS generado siempre usa transform para el movimiento de deslizamiento.
¿Qué controla exactamente el control deslizante de radio de borde?
Escala tanto el redondeo de esquinas de la pista como el del círculo de forma conjunta, proporcionalmente a la altura de la pista. Al 50% obtienes una píldora totalmente redondeada con un círculo circular; valores más bajos mantienen la forma más rectangular para un interruptor más cuadrado, tipo app.