¿Cómo puedo crear degradados de color lineales y radiales usando CSS?

Puedes crear degradados (o gradientes) de color directamente en CSS utilizando las funciones linear-gradient() y radial-gradient(). Estas funciones generan una imagen y se aplican comúnmente a la propiedad background-image, aunque también pueden usarse en otras propiedades que acepten imágenes, como list-style-image o border-image.

1. linear-gradient() (Degradados Lineales):

Esta función crea una imagen de un gradiente de color que progresa en línea recta. Necesitas especificar al menos dos «paradas de color» (color stops). Opcionalmente, puedes definir una dirección o un ángulo para el gradiente.

Sintaxis básica:

linear-gradient([<ángulo> | to <lado-o-esquina>,]? <parada-de-color> [, <parada-de-color>]+);

• Dirección/Ángulo (opcional):
  • Puede ser un ángulo (ej. 45deg, 90deg). 0deg es hacia arriba, 90deg hacia la derecha.
  • O palabras clave como to top, to bottom (valor por defecto si se omite la dirección), to left, to right, to top right, etc.
• Paradas de color: Son los colores entre los que se realizará la transición. Puedes especificar la posición de cada color usando porcentajes o longitudes.

.mi-elemento-lineal {
  height: 200px;
  width: 100%;
  /* Degradado de arriba (azul) hacia abajo (verde) */
  background-image: linear-gradient(to bottom, steelblue, lightgreen);
  
  /* Ejemplo con ángulo y tres colores con posiciones específicas */
  /* background-image: linear-gradient(135deg, red 0%, yellow 50%, blue 100%); */
}Lenguaje del código: PHP (php)

2. radial-gradient() (Degradados Radiales):

Esta función crea una imagen de un gradiente de color que irradia desde un punto de origen (el centro) hacia afuera. Puedes definir la forma del gradiente (círculo o elipse), su tamaño, la posición del centro y las paradas de color.

Sintaxis básica:

radial-gradient([<forma> <tamaño>] [at <posición>]?, <parada-de-color> [, <parada-de-color>]+);

• Forma (opcional): circle (círculo) o ellipse (elipse - valor por defecto).
• Tamaño (opcional): Palabras clave como closest-side, farthest-side, closest-corner, farthest-corner (valor por defecto), o longitudes/porcentajes explícitos.
• Posición (at <posición>, opcional): El centro del gradiente. Por defecto es center. Se puede usar top left, porcentajes (ej. at 25% 75%), etc.
• Paradas de color: Similar a los gradientes lineales, defines los colores y sus posiciones.

.mi-elemento-radial {
  height: 200px;
  width: 100%;
  /* Degradado radial circular, del centro (blanco) hacia afuera (azul) */
  background-image: radial-gradient(circle at center, white, dodgerblue);

  /* Ejemplo de elipse, desde la esquina superior izquierda, con tres colores */
  /* background-image: radial-gradient(ellipse at top left, orange, transparent 50%, purple); */
}Lenguaje del código: PHP (php)

Ambas funciones son muy versátiles y te permiten crear una gran variedad de efectos visuales. Puedes usar múltiples paradas de color para transiciones más complejas, e incluso crear «hard stops» (transiciones abruptas) definiendo dos colores en la misma posición. También puedes apilar múltiples gradientes en un mismo background-image separándolos por comas.