Saltar al contenido

Generador de degradados CSS

Crea degradados lineales, radiales o cónicos con vista previa en vivo, ajusta colores y paradas, y copia el código CSS o Tailwind listo para pegar.

Tipo de degradado

Ángulo

90°

Paradas de color (2)

  • #2C71DE
  • #051938

Clic para añadir · Arrastrar para mover

background: linear-gradient(90deg, #2C71DE 0%, #051938 100%);

Degradados CSS listos para usar

Haz clic en uno para cargarlo en el editor y ajustarlo a tu gusto.

Qué es un degradado CSS y cómo funciona

Un degradado (o gradiente) es una transición suave entre dos o más colores, usada como fondo mediante la propiedad background de CSS. En vez de un color plano, el navegador dibuja una mezcla progresiva entre los colores que definas, en la dirección o forma que elijas.

Cada color del degradado se define con una parada de color: el código del color y el punto, en porcentaje, donde ese color queda completamente puro. Entre dos paradas, el navegador calcula automáticamente la transición. Puedes usar solo dos paradas para una mezcla simple, o añadir varias para un degradado con más matices.

Lineal

Los colores se transicionan en línea recta, en el ángulo que definas. Es el tipo más común, ideal para fondos con una dirección clara, de arriba a abajo o en diagonal.

linear-gradient(90deg, #F97316, #FBBF24)

Radial

Los colores se expanden en círculo desde un punto central hacia fuera. Funciona bien para efectos de foco, luz o profundidad.

radial-gradient(circle, #FDE68A, #F97316 70%)

Cónico

Los colores giran alrededor de un punto central, como las agujas de un reloj. Es el tipo menos habitual, útil para ruedas de color, indicadores de progreso o efectos más experimentales.

conic-gradient(from 90deg, #F97316, #FBBF24, #14B8A6, #F97316)

Cómo se escribe un degradado en CSS

Un degradado lineal se declara con la función linear-gradient() dentro de la propiedad background. Estas son sus partes:

135deg
La dirección. 0deg va hacia arriba, 90deg hacia la derecha y 180deg hacia abajo. También puedes escribir to right o to bottom right.
#FF5F6D
Cada color del degradado, en cualquier formato de CSS: HEX, rgb(), hsl() u oklch().
0%
La posición de la parada: dónde ese color es puro. Si la omites, el navegador reparte los colores a partes iguales.

Los radiales usan radial-gradient(circle, …) y los cónicos conic-gradient(from 90deg, …), con las mismas paradas de color.

background: linear-gradient(135deg, #FF5F6D 0%, #FFC371 100%);

Cómo usar el generador

  1. Elige el tipo

    Lineal, radial o cónico. En los lineales y cónicos ajusta el ángulo con el deslizador o con los botones de dirección.

  2. Ajusta colores y paradas

    Selecciona una parada para cambiar su color, arrástrala en la barra para moverla o haz clic en la barra para añadir otra. Admite hasta ocho paradas.

  3. Copia el código

    Copia el CSS o su equivalente en clases de Tailwind y pégalo en tu proyecto. También puedes exportar los colores sueltos.

Consejos para que tus degradados se vean bien

  • Colores cercanos en el círculo

    Los colores vecinos en el círculo cromático crean transiciones suaves y naturales.

  • Evita la zona gris

    Entre dos colores opuestos el centro suele quedar apagado. Añade una parada intermedia más viva para evitarlo.

  • Pocas paradas

    Dos o tres colores bastan en la mayoría de fondos. Más paradas suelen restar elegancia.

  • Texto legible encima

    Comprueba el contraste del texto con el color más claro y con el más oscuro del degradado.

Preguntas frecuentes

Usa la propiedad background con la función linear-gradient(), radial-gradient() o conic-gradient(), indicando la dirección y los colores. Por ejemplo: background: linear-gradient(90deg, #2193B0, #6DD5ED);

Es cada uno de los colores que forman el degradado, junto con el punto (en porcentaje) donde ese color se muestra puro. Entre dos paradas, el navegador calcula la transición automáticamente.

El lineal transiciona en línea recta según un ángulo. El radial se expande en círculo desde un punto central. El cónico gira alrededor de un punto central, como las agujas de un reloj.

Puedes añadir tantas como necesites, haciendo clic sobre la barra de vista previa. Con dos paradas obtienes una transición simple, y con más puedes crear degradados con varios tonos.

Sí, además del código CSS estándar, el generador ofrece el equivalente en sintaxis de Tailwind, listo para copiar.

Sí, linear-gradient, radial-gradient y conic-gradient son propiedades CSS estándar, compatibles con todos los navegadores modernos.

Aplica el degradado al body y dale al menos la altura de la ventana: body { min-height: 100vh; background: linear-gradient(180deg, #EE9CA7, #FFDDE1); }

No se puede animar directamente el cambio entre dos degradados, pero sí moverlo: dale un background-size mayor que el elemento (por ejemplo 200%) y anima background-position con una transición o @keyframes.

Herramientas relacionadas