1. ¿Qué son los degradados CSS?

Un degradado es una transición suave entre dos o más colores que se genera directamente en el navegador, sin necesidad de imágenes externas. En CSS se declara mediante la función gradient() dentro de la propiedad background o background-image.

Los dos tipos principales son:

• Linear Gradient: el cambio de color ocurre a lo largo de una línea recta.
• Radial Gradient: el cambio se extiende desde un punto central hacia los bordes formando círculos o elipses.

2. Sintaxis de linear-gradient

La forma básica es:

background-image: linear-gradient([dirección|ángulo], color-stop1, color-stop2, ...);

Ejemplos de dirección:

• to right (de izquierda a derecha)
• to bottom left (de arriba‑derecha a abajo‑izquierda)
• Ángulos en grados: 45deg, 180deg, etc.

Ejemplo 1: Degradado horizontal simple

.bg-horizontal {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

Ejemplo 2: Degradado diagonal con varios paradas

.bg-diagonal {
  background-image: linear-gradient(135deg, #00c6ff 0%, #0072ff 50%, #004080 100%);
}

3. Sintaxis de radial-gradient

La forma básica es:

background-image: radial-gradient([forma] [extensión] at [posición], color-stop1, color-stop2, ...);

Parámetros más comunes:

• Forma: circle (circular) o ellipse (elíptica, predeterminado).
• Extensión: closest-side, farthest-corner, etc.
• Posición: coordenadas o palabras clave (center, top left, etc.).

Ejemplo 3: Degradado radial circular centrado

.bg-radial-circle {
  background-image: radial-gradient(circle at center, #ff9a9e, #fad0c4);
}

Ejemplo 4: Degradado radial elíptico desplazado

.bg-radial-ellipse {
  background-image: radial-gradient(ellipse farthest-corner at 30% 30%, #a1c4fd, #c2e9fb);
}

4. Comparativa rápida (dos columnas)

5. Uso avanzado y trucos de rendimiento

5.1. Degradados con background-size y background-position

.striped-gradient {
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

Resultado: patrón de rayas diagonales sin imágenes.

5.2. Degradado animado con @keyframes

@keyframes pulse {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.animated-gradient {
  background: linear-gradient(270deg, #ff6a00, #ee0979);
  background-size: 200% 200%;
  animation: pulse 4s ease infinite;
}

Este efecto es útil para indicadores de carga o hero banners.

6. Compatibilidad y fallback

Los navegadores modernos (Chrome ≥ 57, Firefox ≥ 16, Edge ≥ 12, Safari ≥ 6) soportan ambas funciones sin prefijos. Para versiones antiguas, puedes usar:

background-image: -webkit-linear-gradient(...);
background-image: -moz-linear-gradient(...);
background-image: linear-gradient(...);

Además, siempre define un color de fondo sólido como fallback antes del degradado:

background-color: #ff7e5f; /* fallback */
background-image: linear-gradient(to right, #ff7e5f, #feb47b);

7. Accesibilidad y contraste

Los degradados pueden reducir el contraste percibido. Utiliza herramientas como WebAIM Contrast Checker para asegurar un ratio ≥ 4.5:1 en texto normal y ≥ 3:1 en texto grande.

Consejo práctico: coloca una capa semitransparente de color sólido sobre el degradado para mejorar la legibilidad:

.hero {
  position: relative;
  color: #fff;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.7));
  pointer-events: none;
}

8. Solución de problemas frecuente

• Degradado no se muestra: verifica que la propiedad sea background-image o background y que no haya un background-color sobrescribiéndolo.
• Dirección inesperada: recuerda que to right es de izquierda a derecha; los ángulos se miden en sentido horario desde el eje X positivo.
• Bandas visibles en dispositivos de baja resolución: añade background-size: cover o usa image-rendering: -webkit-optimize-contrast para suavizar.
• Problemas en Safari iOS: incluye el prefijo -webkit- y evita radial-gradient() con valores de posición no soportados (ej.: at 30% 30%).

9. Mejores prácticas recomendadas

1. Define siempre un color de fondo sólido como fallback.
\n
2. Limita la cantidad de paradas de color a 3‑4 para evitar sobrecarga de renderizado.
3. Utiliza variables CSS (--primary, --secondary) para facilitar cambios temáticos.
4. Comprueba contrastes en modo oscuro y claro.
5. Revisa el rendimiento con devtools → Rendering → Paint Flashing.