Generador de degradados CSS

¿Qué es un generador de degradados CSS?#

Un degradado CSS es una transición suave entre dos o más colores, pintada por el navegador a lo largo de una línea, un radio o alrededor de un ángulo. Usado bien, un solo degradado puede sustituir a una imagen de fondo de 200 kilobytes: escala a cualquier tamaño, se mantiene nítido en cada pantalla y se sirve en una sola línea de CSS. Lo difícil no es escribir la sintaxis, sino ver el resultado mientras afinas los colores, el ángulo y los puntos de color.

Esta página es un banco de trabajo en vivo para eso. Arrastras los puntos, deslizas el ángulo, cambias entre cinco tipos de degradado y la página emite la declaración exacta linear-gradient(...) (o radial-, conic-, repeating-) que tu hoja de estilos necesita, más un fragmento Tailwind v4 @theme listo para pegar que convierte cada color en un token reutilizable.

Cómo se usa#

1. Elige un Tipo de degradado:
   • Lineal — los colores transicionan a lo largo de una línea recta en un ángulo elegido. Es el valor por defecto y cubre la mayoría de los casos.
   • Radial — los colores irradian hacia afuera desde un punto central. Bueno para focos y viñetas.
   • Cónico — los colores barren alrededor de un centro como en un gráfico circular. Útil para ruedas de color y fondos de spinner.
   • Lineal repetido / Radial repetido — el mismo degradado en mosaico, que produce franjas o anillos concéntricos.
2. Para los tipos lineal y cónico, arrastra el control Ángulo (0–359°). La vista previa se actualiza en vivo; 0° apunta hacia arriba, 90° apunta a la derecha, 135° es la clásica diagonal de arriba-izquierda a abajo-derecha.
3. Para los tipos radiales, elige una Forma: Círculo o Elipse (el valor por defecto para fondos responsivos a sangre).
4. Gestiona tus Puntos de color:
   • Cada punto tiene una muestra de color y una posición en la barra de degradado (0–100 %).
   • Arrastra los tiradores de la barra para mover un punto o escribe una posición precisa.
   • Haz clic en Añadir punto para insertar uno nuevo; haz clic en la × de un punto para eliminarlo.
   • Un degradado necesita al menos dos puntos.
5. Lee las dos salidas en la parte inferior: CSS (el valor de degradado en bruto) y Tailwind v4 (un bloque @theme que registra cada color como un token --color-grad-*, más una utilidad .bg-gradient que los consume). Usa el botón de copiar junto a cada una.

Características clave#

• Cinco tipos de degradado en una herramienta. Lineal, radial, cónico y ambas variantes repetidas; cambia sin volver a introducir los colores.
• Vista previa en vivo y precisa al píxel. El bloque grande de la derecha es el degradado real que vas a servir; lo que ves es lo que tu hoja de estilos recibe.
• Barra de puntos con tiradores. Recoloca cualquier punto de color arrastrándolo; el porcentaje se actualiza mientras te mueves.
• Salida dual. CSS en bruto para hojas escritas a mano y un fragmento Tailwind v4 @theme (cada punto se convierte en un token --color-grad-*, consumido por una utilidad .bg-gradient) para proyectos utility-first: ambas siempre sincronizadas.
• Lectura de ángulo. El grado exacto se muestra junto al control, para que puedas reproducir un degradado con precisión en otra parte.
• Cero subidas. Colores, puntos y ángulo nunca salen del navegador.

Ejemplo práctico#

Supongamos que quieres un degradado de marca tranquilo y ligeramente diagonal que vaya de índigo a teal. Elige Lineal, pon el Ángulo en 135° y usa dos puntos:

• Punto 1: #4F46E5 en 0% (índigo)
• Punto 2: #0D9488 en 100% (teal)

La salida CSS es:

linear-gradient(135deg, #4F46E5 0%, #0D9488 100%)

y el fragmento Tailwind v4 es:

@theme {
  --color-grad-1: #4F46E5;
  --color-grad-2: #0D9488;
}

.bg-gradient {
  background-image: linear-gradient(135deg, var(--color-grad-1) 0%, var(--color-grad-2) 100%);
}

En vez de incrustar los valores hex, la salida Tailwind registra cada punto como un token de diseño --color-grad-* dentro de @theme y luego apunta una única utilidad .bg-gradient a ellos a través de var(...). Cambia una variable y cada sitio que la consume se actualiza a la vez. ¿Quieres un tercer color, más suave, en el medio? Haz clic en Añadir punto, pon #7C3AED en 50% y el fragmento gana un token --color-grad-2: #7C3AED mientras el teal baja a --color-grad-3: los puntos siempre se renumeran por posición, así que los nombres nunca se desincronizan de la barra.

Preguntas frecuentes#

¿Cuál es la diferencia entre lineal, radial y cónico?#

Lineal transiciona a lo largo de una línea recta definida por un ángulo. Radial transiciona hacia afuera desde un punto, produciendo un círculo o elipse de color. Cónico transiciona alrededor de un punto: imagina una rueda de color rotando, donde cada ángulo es un tono diferente. Las variantes repetidas de cada una teselan el patrón para crear franjas o anillos.

¿Por qué la salida Tailwind define variables --color-grad-* en vez de incrustar los colores?#

Tailwind v4 movió la configuración al CSS a través del bloque @theme, donde cada entrada se convierte en un token de diseño reutilizable. Al emitir cada punto como --color-grad-1, --color-grad-2, … y hacer que .bg-gradient los referencie vía var(...), el fragmento te entrega una paleta que puedes reutilizar en cualquier sitio (bordes, texto, sombras), no solo en este fondo. Edita una sola variable y todos los consumidores se actualizan a la vez. (En Tailwind v3 no hay @theme; pega la salida CSS en tu hoja de estilos en su lugar.)

¿Puedo hacer un escalón duro de color en vez de una transición suave?#

Sí. Da a dos puntos la misma posición, por ejemplo #000 50% y #fff 50%. Sin distancia entre ellos, la transición tiene anchura cero, así que el cambio se vuelve una línea dura. Así se construyen fondos rayados o en bandas sin una imagen.

El degradado cónico se ve rotado respecto a mi herramienta de diseño. ¿Por qué?#

Las distintas herramientas miden el ángulo inicial de un degradado cónico de forma diferente. CSS mide el ángulo from en sentido horario desde la parte superior (las 12 en punto). Si tu herramienta de diseño mide desde la derecha (las 3 en punto) o en sentido antihorario, resta o suma 90° (o cambia el signo) hasta que la vista previa coincida.