Los gradientes CSS están representados por el tipo de datos <gradient>, un tipo especial de <image> hecho de una transición progresiva entre dos o más colores. Hay para elegir entre tres tipos de degradados: lineal (creado con la función linear-gradient() ), radial (creado con la función radial-gradient() ), y cónico (creado con la función conic-gradient() ). También se pueden crear degradados repetitivos con las repeating-linear-gradient(), repeating-radial-gradient() y repeating-conic-gradient().

Los degradados se pueden usar en cualquier lugar donde usaría una <image>, como un background-image, por ejemplo de fondo de cualquier elemento html. Debido a que los gradientes los generan los navegadores dinámicamente, pueden suplir a los archivos de imágen ráster que tradicionalmente se usaban para lograr efectos similares, se ven mejor que las imágenes al redimensionar la ventana, pueden cambiarse de tamaño sobre la marcha y son facilmente animables

Un gradiente lineal crea una banda de colores que progresa en línea recta. Para crear el tipo de degradado más básico, todo lo que necesita es especificar dos colores, denominados paradas de color, como mínimo dos, pero puede añadirle tantos como desee. Por tanto la síntaxis básica para darle un degradado líneal como background a cualquier elemento o etiqueta html, sería la siguiente:

.linear-gradient-basico{background: linear-gradient(black, white);}, el resultado es el mismo background que veis en las etiquetas.

Vereís que el gradiente, va de arriba hacía abajo, osea bottom, es su valor por defecto, si queremos darle otras direcciones, podemos emplear las palabras clave top, bottom, left ó right, una combinación de ellas ó podemos darle la dirección deseada, con un valor de grados (deg), positivo ó negativo u otras unidades para medir angulos como radianes, etc.

Esta propiedad crea una imágen que consiste en una degradación radial de colores. Imagina que tienes un punto central y los colores irradian hacia afuera en forma de círculos o elipses, mezclándose suavemente entre sí.

los componentes principales de radial-gradient(), son:

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

shape (opcional): Define la forma de la degradación. Puede ser:
circle: La degradación tendrá forma de círculo.
ellipse (valor por defecto): La degradación tendrá forma de elipse, determinada por las dimensiones del contenedor.

size (opcional): Determina el tamaño de la degradación radial. Puede tomar los siguientes valores:
closest-side: La degradación se extiende hasta el lado más cercano del contenedor.
farthest-side: La degradación se extiende hasta el lado más lejano del contenedor.
closest-corner: La degradación se extiende hasta la esquina más cercana del contenedor.
farthest-corner (valor por defecto): La degradación se extiende hasta la esquina más lejana del contenedor.
Valores explícitos de radio y/o elipse (ej: `20px`, `50% 30%`).

at position (opcional): Define la posición del centro de la degradación. Puede tomar valores como: center (valor por defecto): Centra la degradación. Valores de píxeles o porcentajes (ej: `20px 30px`, `50% 75%`). También puedes usar palabras clave como top, bottom, left, right.

color-stop1, color-stop2, ...: Son los colores que formarán la degradación. Cada "color-stop" especifica un color y opcionalmente una posición donde ese color debe empezar.
Color: Un valor de color válido en CSS (ej: `red`, `blue`, `#ff0000`, `rgba(0, 0, 255, 0.5)`).
Posición (opcional): Un valor en porcentaje o longitud que indica dónde debe empezar ese color en la degradación. Si no se especifica, los colores se distribuyen uniformemente.

La función radial-gradient() es una herramienta muy versátil para crear fondos visualmente atractivos y complejos directamente en CSS, sin necesidad de usar imágenes.

La función conic-gradient() crea una imágen que consiste en una degradación cónica. Imagina un cono de helado visto desde arriba, los colores comienzan en un punto central y se extienden alrededor de ese punto en forma de círculo, como si fueran rebanadas de un pastel.

la estructura básica de la función conic-gradient():

background-image: conic-gradient(from angle at position,color-stop1,color-stop2, ...);

from angle (opcional): Define el ángulo inicial para la degradación. Por defecto es `0deg`, que corresponde a la parte superior. Los valores de ángulo siguen la convención de las agujas del reloj. Puedes usar unidades como `deg` (grados), `rad` (radianes), `grad` (grados centesimales) o `turn` (vueltas).

at position (opcional): Especifica la posición del centro de la degradación. Funciona de manera similar a la propiedad `at position` en `radial-gradient()`. Por defecto es `center`. Puedes usar valores en píxeles, porcentajes o palabras clave como `top`, `bottom`, `left`, `right`.

color-stop1,color-stop2, ...: Son los colores que componen la degradación cónica. Cada "color-stop" define un color y, opcionalmente, una posición angular donde ese color debe comenzar.

Color: Un valor de color CSS válido (ej: `red`, `blue`, `#ff0000`, `rgba(0, 0, 255, 0.5)`).

Posición angular (opcional): Un valor de ángulo (ej: `45deg`, `90deg`) o un porcentaje que indica dónde debe empezar ese color. Si no se especifica, los colores se distribuyen uniformemente. Los porcentajes se interpretan relativos a una vuelta completa (360 grados).

La función conic-gradient() es ideal para crear gráficos circulares, indicadores de progreso con forma de anillo y otros efectos visuales interesantes basados en ángulos.

Bueno como pienso que todo se comprende mejor con ejemplos visuales, he preparado abajo una galería, con múltiples ejemplos de background-image, que al :hover despliega un cartel con su valor, algunas animadas para observar sus efectos.

Espero haber explicado claramente, las grandes cualidades de esta propiedad, para llenar de colores nuestras páginas. Para hacer buenas composiciones la síntaxis de la propiedad se complica, y para empezar a dominarla no queda otra que prácticar mucho con ella.

Bueno me despido, no sin antes recordarte que me puedes hacer comentarios, sugerencias, etc, agradezco tu contacto, gracias por tu visita.