Generador de Gradientes CSS: Guía completa de gradientes lineales y radiales

Los gradientes CSS son una de las herramientas visuales más poderosas disponibles para los diseñadores web — crean transiciones suaves entre colores sin un solo archivo de imagen, se renderizan a cualquier resolución y se animan con transiciones CSS. Sin embargo, muchos diseñadores solo usan lo básico: dos colores, una dirección.

Esta guía cubre el rango completo de capacidades de gradientes CSS: los tres tipos de gradientes, paradas de color avanzadas, notación de ángulos y técnicas creativas como gradientes de malla, texto degradado y fondos rayados — más consideraciones de rendimiento y buenas prácticas.

Descripción general de tipos de gradientes CSS

CSS proporciona tres funciones de gradiente. linear-gradient() crea una transición a lo largo de una línea recta. radial-gradient() crea una transición que se irradia hacia afuera desde un punto central. conic-gradient() crea una transición que gira alrededor de un punto central como una rueda de colores. Los tres se usan como valores para la propiedad background-image y pueden animarse con @property (CSS Houdini).

Sintaxis y ángulos de linear-gradient

La sintaxis básica: linear-gradient(dirección, color-stop-1, color-stop-2, ...). La dirección puede ser una palabra clave (to bottom, to right) o un ángulo en grados (0deg = hacia arriba, 90deg = hacia la derecha, 180deg = hacia abajo). El sistema de ángulos usa medición estilo brújula: 0deg apunta hacia arriba, aumenta en sentido horario.

/* Declaraciones equivalentes */
background: linear-gradient(to bottom, #3A7BD5, #00D2FF);
background: linear-gradient(180deg, #3A7BD5, #00D2FF);

/* Diagonal */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Multi-parada */
background: linear-gradient(
  to right,
  #f093fb 0%,
  #f5576c 50%,
  #4facfe 100%
);

Paradas de color y transiciones

Las paradas de color definen dónde comienza y termina cada color dentro del gradiente. Sin posiciones explícitas, los colores se distribuyen uniformemente. Dos paradas adyacentes en la misma posición crean un borde duro (sin transición) — útil para fondos rayados. Un indicador de color (un único valor entre dos paradas) desplaza el punto medio de la transición.

/* Paradas duras — rayas */
background: linear-gradient(
  to right,
  #e74c3c 0% 33%,
  #3498db 33% 66%,
  #2ecc71 66% 100%
);

/* Fundido transparente */
background: linear-gradient(
  to bottom,
  rgba(0,0,0,0),
  rgba(0,0,0,0.8)
);

radial-gradient y conic-gradient

radial-gradient() se irradia desde un punto central. La sintaxis: radial-gradient(forma tamaño at posición, colores). Forma: circle o ellipse. conic-gradient() gira alrededor de un punto central: los colores se distribuyen alrededor de 360°. Útil para gráficos circulares, ruedas de colores y patrones de rotación.

/* Foco radial */
background: radial-gradient(
  circle at center,
  #3A7BD5 0%,
  transparent 70%
);

/* Cónico — rueda de colores */
background: conic-gradient(
  red, yellow, lime, cyan, blue, magenta, red
);

Técnicas creativas con gradientes

Texto degradado: aplica un gradiente a background-image, luego usa background-clip: text y -webkit-background-clip: text con color: transparent. Bordes degradados: usa background con recorte padding-box y border-box, o la propiedad border-image. Gradientes de malla: superpone múltiples gradientes radiales con diferentes posiciones y colores. Gradientes adaptativos para modo oscuro: usa propiedades CSS personalizadas dentro de funciones de gradiente.

Rendimiento y buenas prácticas

Los gradientes CSS son compuestos por GPU y tienen buen rendimiento en la mayoría de casos. Evita animar gradientes con transiciones CSS en background-image — los navegadores no pueden interpolar entre valores de gradiente de forma nativa. En su lugar, usa @property (CSS Houdini). Prueba siempre la accesibilidad del gradiente: el texto sobre fondos degradados debe mantener el contraste WCAG en cada punto del gradiente.

Preguntas Frecuentes