Gradientes

Los gradientes o degradados en CSS no son propiedades por sí mismos, sino un tipo especial de imagen de fondo. Por eso, siempre se aplican usando las propiedades background-image o la abreviada background.

/* De arriba hacia abajo (por defecto) */
background-image: linear-gradient(#3498db, #9b59b6);
/* Dirección a 45 grados: Azul (inicio), Morado (al 50%), Rosa (final) */
  background-image: linear-gradient(45deg, #3498db 0%, #9b59b6 50%, #e74c3c 100%);

Existen tres tipos principales de gradientes en CSS, y todos se generan mediante funciones matemáticas del navegador, lo que significa que no pesan nada y escalan perfectamente a cualquier resolución.

Propiedad Descripcion
linear-gradient Los colores avanzan en línea recta. Es el tipo de degradado más común.
radial-gradient Los colores emergen desde un punto central (un foco) y se expanden de forma circular o elíptica hacia afuera.
conic-gradient Los colores rotan alrededor de un punto central, similar a las agujas de un reloj o a un gráfico de pastel. Son excelentes para crear efectos metálicos, ruedas de color o dashboards.

1. Gradientes Lineales

Los colores avanzan en línea recta. Es el tipo de degradado más común.

.caja {
   /* De arriba hacia abajo (por defecto) */
   background-image: linear-gradient(#3498db, #9b59b6);
}

2. Gradientes Radiales

Los colores emergen desde un punto central (un foco) y se expanden de forma circular o elíptica hacia afuera.

.caja-radial {
   /* Un destello que va desde el centro blanco hacia un fondo oscuro */
   background-image: radial-gradient(circle, #ffffff 0%, #2c3e50 80%);
}

3. Gradientes Cónicos

Los colores rotan alrededor de un punto central, similar a las agujas de un reloj o a un gráfico de pastel. Son excelentes para crear efectos metálicos, ruedas de color o dashboards.

.caja-conica {
   background-image: conic-gradient(#f1c40f, #e67e22, #e74c3c, #f1c40f);
}

4. El Truco de los Textos con Gradiente

Por defecto, los degradados solo se aplican a los fondos de los contenedores. Si quieres que el texto de un título tenga un gradiente, necesitas este truco de tres líneas:

.texto-gradiente {
   background-image: linear-gradient(to right, #ff416c, #ff4b2b);
   -webkit-background-clip: text;             /* Corta el fondo para que solo rellene las letras */
   -webkit-text-fill-color: transparent;      /* Hace el texto transparente para ver el fondo */
   display: inline-block;                     /* Asegura que el bloque se adapte al tamaño del texto */
}