¿Qué es un degradado de color y cómo crearlo en CSS?

Un gradiente de color en CSS es una transición suave entre dos o más colores que el navegador renderiza completamente sin necesidad de ningún archivo de imagen. Este simple hecho convierte a los gradientes en una de las herramientas más prácticas del arsenal de cualquier desarrollador front-end. Reducen las peticiones HTTP, escalan perfectamente a cualquier resolución y se pueden actualizar con una sola línea de código. Ya sea que estés dando estilo a un botón de llamada a la acción, construyendo un hero de página completa o añadiendo profundidad a un componente tipo tarjeta, entender cómo funcionan los gradientes CSS te da un control preciso sobre cada píxel de esa transición.

Gradientes lineales explicados

La función linear-gradient en CSS dibuja una transición de color a lo largo de una línea recta. La sintaxis básica es la siguiente:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

El parámetro direction controla la dirección del gradiente CSS. Puedes usar valores de palabras clave como to right, to bottom left, o un ángulo en grados como 135deg. Si no se especifica ninguna dirección, el valor por defecto es to bottom (de arriba hacia abajo, 180 grados).

Los puntos de color (color stops) te dan un control preciso. Cada punto puede incluir una posición opcional:

/* Dos colores, de izquierda a derecha */
background-image: linear-gradient(to right, #6a11cb, #2575fc);

/* Tres colores con posiciones explícitas */
background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

Añadir una posición en porcentaje a cada punto te permite crear bordes duros (coloca dos puntos en la misma posición) o comprimir y expandir la zona de transición. Esta es la base de los patrones de rayas y las barras de progreso. Antes de usar valores de color, asegúrate de entender cómo los interpreta CSS - nuestra guía de conversión HEX a RGB explica la diferencia entre formatos y cuándo es apropiado usar cada uno.

Gradientes radiales explicados

Un gradiente radial en CSS se irradia hacia afuera desde un punto central con una forma elíptica o circular. La sintaxis añade tres parámetros opcionales: forma, tamaño y posición.

background-image: radial-gradient(shape size at position, color-stop1, color-stop2);

Esto es lo que hace cada parámetro:

• Forma: circle fuerza un círculo perfecto; ellipse (el valor por defecto) se estira para ajustarse al elemento.
• Tamaño: Palabras clave como closest-side, farthest-corner o longitudes explícitas controlan hasta dónde se extiende el gradiente.
• Posición: Funciona exactamente igual que background-position - puedes usar palabras clave, porcentajes o valores en píxeles.

/* Efecto de foco de luz */
background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3), transparent 60%);

Los gradientes radiales son ideales para efectos de foco de luz, botones con efecto de brillo y superposiciones de viñeta suave sobre imágenes hero.

Gradientes cónicos - La incorporación moderna

La función conic-gradient en CSS es la más reciente de las tres y la que la mayoría de los desarrolladores omite. En lugar de irradiarse hacia afuera, barre alrededor de un punto central como una rueda de colores o un gráfico circular. La especificación W3C CSS Images Level 4 define formalmente los gradientes cónicos, y todos los navegadores modernos los soportan actualmente.

/* Gráfico circular - 40% azul, 60% coral */
background-image: conic-gradient(#4f8ef7 0% 40%, #ff6b6b 40% 100%);

/* Rueda de colores completa */
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

También puedes rotar el ángulo de inicio con from Xdeg y desplazar el centro con at X% Y%:

background-image: conic-gradient(from 45deg at 60% 50%, #667eea, #764ba2, #667eea);

Entre sus usos prácticos destacan los gráficos circulares construidos con CSS puro, los patrones de tablero de ajedrez y los spinners de carga dinámicos.

Gradientes repetidos

CSS proporciona repeating-linear-gradient y repeating-radial-gradient para repetir un patrón de gradiente a lo largo de un elemento sin tener que listar manualmente decenas de puntos de color. La regla clave: el patrón solo se repite si el último punto de color no llega al 100%.

/* Rayas diagonales */
background-image: repeating-linear-gradient(
  45deg,
  #f8f9fa,
  #f8f9fa 10px,
  #dee2e6 10px,
  #dee2e6 20px
);

/* Anillos concéntricos */
background-image: repeating-radial-gradient(
  circle at center,
  #fff 0px,
  #fff 5px,
  #e9ecef 5px,
  #e9ecef 10px
);

Los gradientes repetidos son eficientes en rendimiento porque el navegador genera el patrón completo a partir de una regla CSS compacta, sin ningún recurso de imagen que descargar.

Ejemplos prácticos

Botón con gradiente

Un caso de uso muy habitual es un botón de llamada a la acción llamativo. El truco está en definir también background-size y animar el efecto al pasar el cursor:

.btn-gradient {
  background-image: linear-gradient(90deg, #6a11cb, #2575fc);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 12px 28px;
  transition: opacity 0.3s ease;
}
.btn-gradient:hover {
  opacity: 0.85;
}

Fondo hero de página completa

Un gradiente de fondo en CSS sobre el elemento body o una sección hero establece el tono visual de inmediato:

.hero {
  background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
}

Superposición oscura sobre una imagen

Apilar un gradiente encima de una foto mantiene el texto legible sin necesidad de un elemento de superposición adicional:

.card-image {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75) 100%),
    url('photo.jpg');
  background-size: cover;
}

Texto con gradiente

Los gradientes en texto requieren tres propiedades trabajando en conjunto:

.gradient-text {
  background-image: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Ten en cuenta que background-clip: text aún requiere el prefijo -webkit- en algunos navegadores, así que incluye siempre ambas declaraciones. Puedes explorar y validar tus combinaciones de color antes de escribir cualquier código usando la herramienta Color Explorer.

Compatibilidad con navegadores y alternativas

Los gradientes lineales y radiales tienen soporte completo en todos los navegadores principales desde 2013. Los gradientes cónicos alcanzaron soporte amplio en 2021 (Chrome 69, Firefox 83, Safari 12.1). Según Can I Use, los gradientes cónicos cubren actualmente más del 93% del uso global de navegadores.

La estrategia de alternativa correcta es sencilla:

1. Declara primero un background-color sólido. Los navegadores que no soporten el gradiente mostrarán este color.
2. Añade después la regla background-image con el gradiente. Los navegadores compatibles lo superpondrán encima.
3. Para los gradientes cónicos, añade una alternativa con linear-gradient entre el color sólido y la regla cónica.

.element {
  background-color: #6a11cb;                        /* alternativa */
  background-image: linear-gradient(90deg, #6a11cb, #2575fc); /* navegadores modernos */
}

Después de escribir tus reglas de gradiente, considera pasar tu hoja de estilos por un minificador de CSS para eliminar espacios en blanco y reducir el tamaño del archivo antes del despliegue.

Genera gradientes CSS al instante

Escribir la sintaxis de gradientes a mano es rápido una vez que conoces las reglas, pero previsualizar decenas de combinaciones de colores en tiempo real es donde un generador de gradientes online te ahorra tiempo de verdad. En lugar de recargar el navegador una y otra vez, puedes arrastrar los puntos de color, ajustar ángulos y copiar el CSS final en cuestión de segundos.

Si necesitas convertir un color de un archivo de diseño antes de construir tu gradiente, el conversor HEX a RGB y el selector de color son puntos de partida útiles antes de abrir el constructor de gradientes.

Crea gradientes CSS increíbles al instante

Gratis, sin registro, funciona directamente en tu navegador. Genera gradientes lineales, radiales y cónicos con vista previa en tiempo real y CSS listo para copiar.

Prueba la herramienta de color de DevDeck ahora →

Conclusión

Los gradientes CSS reemplazan los recursos de imagen con código puro, ofreciéndote gradientes independientes de la resolución, fáciles de actualizar y rápidos de cargar. Empieza con linear-gradient para transiciones direccionales, usa radial-gradient para efectos de foco de luz y brillo, y experimenta con conic-gradient cuando necesites patrones de barrido o estilo circular. Incluye siempre una alternativa de color sólido, presta atención a los requisitos de prefijo para los gradientes en texto y usa una herramienta en tiempo real para acelerar el ciclo de iteración de diseño. Con estos fundamentos en su lugar, tienes todo lo que necesitas para reemplazar las imágenes de gradiente estáticas en todo tu proyecto.