Saltar al contenido
Toolars
Explorar
Informar de un error

Diseño · utilidad Local

Generador de interruptores CSS

CSS Switch Generator

Diseña interruptores de CSS puro con pista, deslizador y colores de ambos estados ajustables, y copia el código con foco accesible y reduced-motion.

Ruta de la tarea / de la entrada al resultado

Dimensiona la pista

Funciona en local · No se sube nada

Cómo funciona Generador de interruptores CSS, privacidad y herramientas relacionadas

Ruta de la tarea / de la entrada al resultado

Cómo diseñar un interruptor de CSS puro

  1. 01

    Dimensiona la pista

    Define Ancho de la pista entre 44 y 128 px y Alto de la pista entre 24 y 64 px. El ancho debe superar al alto en al menos 8 px para que el deslizador tenga recorrido. Los 64 × 34 px predeterminados reflejan las proporciones de la mayoría de los interruptores móviles.

  2. 02

    Encaja el deslizador

    Elige un Tamaño del deslizador de 16 a 56 px. Debe caber dentro de la pista — como máximo el alto de la pista menos 4 px — o el estado cambia a REVISA LOS VALORES con la regla exacta que falló.

  3. 03

    Colorea ambos estados

    Elige Pista inactiva para la posición apagada y Pista activa para la encendida. El deslizador se mantiene blanco con una pequeña sombra suave, así que ambos colores de pista solo necesitan contrastar con el blanco.

  4. 04

    Previsualiza la transición

    Activa Mostrar estado activo para ver cómo el deslizador se desliza y la pista cambia de color con la temporización real de 180 ms. El relleno alrededor del deslizador se calcula como la mitad del alto de pista sobrante, así que el ajuste queda uniforme a cualquier tamaño que elijas.

  5. 05

    Copia o descarga el CSS

    Pulsa Copiar CSS o Descargar .css para guardar toolars-switch.css. El deslizador blanco recorre la distancia calculada entre estados, y la exportación incluye desde el principio el manejo del foco y de reduced-motion. El panel de salida muestra el recuento de bytes en vivo, para que veas lo compacto que queda el componente.

  6. 06

    Monta el marcado

    Coloca un input de casilla seguido de un elemento .switch-track dentro de un contenedor .switch, exactamente en ese orden: el selector de hermanos depende de ello. El input se reduce a una caja invisible de 1 px pero sigue enfocable, y el foco dibuja un contorno de 3 px en tu color de Pista activa.

Datos de la herramienta

Procesamiento
En tu navegador
La entrada sale del dispositivo
Nunca
Retención
No se guarda nada
Precio
Gratis

Tus datos se quedan en el navegador.

Generador de interruptores CSS usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.

Ejecución local

Se ejecuta dentro de la pestaña actual del navegador.

Sin procesamiento oculto

Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.

No se necesita cuenta

Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.

Restablecimiento inmediato

Limpia la pestaña y los datos de trabajo activos desaparecen.

Qué hace Generador de interruptores CSS en realidad

El interruptor de modo oscuro, el de las notificaciones, los indicadores de funciones en un panel de ajustes: el mismo componente aparece en todas partes, y retocar su geometría en el inspector del navegador es lento. Aquí la pista, el deslizador y la distancia de recorrido se resuelven visualmente de una vez; la exportación conserva un input real para el soporte de teclado y tecnología de asistencia; y los experimentos nunca salen de la pestaña. El resultado encaja en un sistema de diseño sin una sola línea de JavaScript. Ambos estados pueden revisarse uno junto al otro antes de copiar nada.

Preguntas frecuentes

¿Qué marcado espera la exportación?
Un contenedor .switch con un input de casilla seguido de un elemento .switch-track. El input está oculto visualmente pero sigue enfocable y operable, así que el interruptor terminado se comporta como el control nativo que envuelve.
¿Qué reglas de geometría se aplican?
Dos: el ancho de la pista debe ser al menos 8 px mayor que su alto, y el deslizador debe caber dentro de la pista — como máximo el alto menos 4 px. Incumplir cualquiera muestra REVISA LOS VALORES, y copiar y descargar quedan desactivados hasta que los valores pasan.
¿Qué distancia recorre el deslizador?
La hoja de estilos lo calcula con tus números: ancho de la pista menos el tamaño del deslizador menos el relleno en ambos extremos, de modo que el deslizador llega a ras del borde de la pista tanto apagado como encendido.
¿La exportación gestiona la reducción de movimiento?
Sí. Un bloque de prefers-reduced-motion elimina las dos transiciones de 180 ms — el cambio de color de la pista y el deslizamiento — de modo que el cambio de estado sigue ocurriendo pero llega al instante, sin movimiento alguno.
¿Qué detalles visuales vienen integrados?
La pista siempre es una píldora completa, porque su radio de esquina es la mitad del alto de la pista, y el deslizador blanco lleva una pequeña sombra fija que le da relieve. Todo lo demás — colores, geometría, distancia de recorrido — sale directamente de tus valores de control.
¿Se suben mis diseños?
No. El espacio de trabajo funciona por completo en la pestaña actual del navegador sin cuenta, y ningún valor se almacena, se registra ni se envía a ninguna parte. Una vez cargada la página, el generador también sigue funcionando sin conexión de red. Pulsa Restablecer para volver a los valores predeterminados.

Continuar en Diseño

Tareas relacionadas, no un callejón sin salida.

Pasa a otro espacio de trabajo enfocado sin volver al índice completo.

Generador de animaciones de carga CSS

CSS Loader Generator

Diseña un anillo orbital o tres puntos que rebotan con marco, trazo, velocidad y colores ajustables, y copia el CSS con @keyframes y reduced-motion.

Crear

Generador de casillas CSS

CSS Checkbox Generator

Diseña casillas personalizadas sobre un input real —con estados de foco y desactivado incluidos— y copia el CSS con tus colores y su transición.

Crear

Generador de clip-path CSS

CSS Clip Path Generator

Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.

Crear

Generador de patrones de fondo CSS

CSS Background Pattern Generator

Crea fondos de puntos, cuadrícula o diagonal solo con degradados CSS, sin imágenes: ajusta mosaico, marca y colores, y copia la regla de tres líneas.

Crear