Generador de gradientes CSS

Un gradiente CSS es una transición suave entre dos o más colores, creada con linear-gradient(), radial-gradient() o conic-gradient(). Aquí lo construyes con los colores de tu paleta, eliges el tipo y el ángulo y copias el código.

Actualizado el

Clic en un HEX para copiarlo · candado para fijarlo

Cómo usarlo

  1. Marca los colores de la paleta que quieres usar como paradas del gradiente.
  2. Elige lineal, radial o cónico y ajusta el ángulo con el control deslizante.
  3. Copia el CSS. Incluye un color de respaldo y una clase para texto con gradiente.

Preguntas frecuentes

¿Qué diferencia hay entre gradiente lineal, radial y cónico?

El lineal avanza en línea recta según un ángulo. El radial se expande desde un centro en forma de círculo o elipse. El cónico gira alrededor de un punto, como las porciones de un gráfico circular.

¿Funcionan los gradientes en todos los navegadores?

linear-gradient() y radial-gradient() funcionan en todos los navegadores actuales. conic-gradient() lo soportan las versiones modernas de Chrome, Edge, Firefox y Safari. El color de respaldo cubre los navegadores antiguos.

¿Cómo pongo un gradiente en un texto?

Aplica el gradiente como background, añade background-clip: text (y -webkit-background-clip: text) y deja el color del texto en transparent. El código exportado ya incluye esa clase.