Sobre esta herramienta
Las propiedades personalizadas de CSS —conocidas como variables CSS— te permiten definir un valor una sola vez, como un color de marca, una unidad de espaciado o una familia tipográfica, y reutilizarlo en todas partes con var(--nombre). Centralizar los valores repetidos significa que un solo cambio a nivel :root se propaga por toda la hoja de estilos en lugar de buscar y reemplazar en decenas de archivos, y como las propiedades personalizadas son valores vivos del DOM, JavaScript o una media query pueden leerlas y reescribirlas en tiempo de ejecución, habilitando cambios de tema instantáneos, modo oscuro o espaciados ajustables por el usuario sin tocar el CSS.
Escribe un nombre y un valor para cada fila de abajo; esta herramienta depura automáticamente cada nombre, elimina un "--" inicial redundante y sustituye los caracteres no válidos por guiones, así que un error como olvidar el prefijo o dejar un espacio de más nunca rompe el bloque generado. Copia el resultado :root { ... } directamente en tu hoja de estilos, o descárgalo como su propio archivo .css para hacer @import donde lo necesites. Todo ocurre localmente en tu navegador mientras escribes; no se sube nada.
Preguntas frecuentes
¿Esto sube mis valores a algún lugar?
No. Todo se ejecuta localmente en tu navegador; tus pares nombre/valor nunca salen de tu dispositivo.
¿Puedo limitar las variables a un selector específico en lugar de :root?
Sí; establece un selector personalizado y el bloque CSS generado lo usará en lugar de :root.