Generador de variables CSS
Centraliza los valores de tu diseño en variables reutilizables y copia el bloque completo en tu hoja de estilos.
Espacio de trabajo · Generador de variables CSS
CSS generado
:root {
--color-primary: #17191c;
--color-surface: #ffffff;
--radius-card: 16px;
--space-section: 80px;
}Cómo se usa
Edita el selector y los pares de nombre y valor.
Añade nuevas variables o elimina las que no uses; la vista previa muestra los colores.
Copia el bloque CSS generado en tu archivo de estilos.
Ejemplos
Tema claro
Define color-primary, color-surface y color-text en :root.
Escala de radios
Variables para radio pequeño, medio y de tarjeta.
Espaciado
Valores reutilizables para secciones, tarjetas y formularios.
Lo que conviene saber
Las variables CSS permiten cambiar un valor en un solo lugar y aplicarlo en todo el proyecto. El generador valida que los nombres empiecen por -- y no contengan espacios.
La vista previa de color es orientativa: si el valor no es un color CSS válido, el navegador mostrará el fondo por defecto. El bloque generado se puede pegar en cualquier hoja de estilos.
Preguntas frecuentes
Herramientas relacionadas
Otras herramientas que pueden servirte para tareas similares.
Generador de botones CSS
Diseña un botón con colores, borde, radio, sombra y estados hover, y copia el CSS.
Formateador CSS
Embellece CSS con reglas, propiedades y llaves bien indentadas.
Generador de degradados CSS
Diseña degradados lineales o radiales y copia el CSS.