Cómo usar gradientes y modos de fusión en CSS para crear efectos en imágenes

Superponer una capa de gradiente de color sobre una fotografía es una de las formas más efectivas de hacer que el texto sea legible sobre banners principales, crear imágenes en duotono alineadas con tu marca o agregar profundidad visual sutil.

Con CSS puro, no necesitas Photoshop ni elementos adicionales en el HTML para lograrlo. Puedes superponer múltiples paradas de gradiente directamente sobre tus imágenes de fondo usando la propiedad abreviada background y background-blend-mode.

En esta guía, te voy a mostrar cómo funcionan los gradientes en CSS, cómo superponerlos sobre imágenes y cómo combinarlos con modos de fusión para lograr efectos visuales profesionales.

1. Los tipos principales de gradientes en CSS

CSS cuenta con tres funciones de gradientes distintas:

Ejemplos de sintaxis básica:

/* 1. Gradiente lineal: de izquierda a derecha */
.linear-box {
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
}
 
/* 2. Gradiente radial: resplandor circular */
.radial-box {
  background: radial-gradient(circle at center, #38bdf8 0%, #0f172a 70%);
}
 
/* 3. Gradiente cónico: rotación de 360 grados */
.conic-box {
  background: conic-gradient(from 45deg, #ec4899, #8b5cf6, #3b82f6, #ec4899);
}

2. Superponer gradientes directamente sobre imágenes de fondo

CSS te permite definir múltiples capas de fondo separadas por comas. La primera capa de la lista se coloca arriba, y las capas siguientes se renderizan por debajo.

Para colocar un gradiente sobre una imagen, defines primero el gradiente y luego la función url():

.hero-card {
  width: 100%;
  min-height: 400px;
  border-radius: 16px;
 
  /* Capa 1 (Superior): Gradiente lineal oscuro semitransparente */
  /* Capa 2 (Inferior): Fotografía de fondo */
  background: 
    linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.85) 100%),
    url('https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&w=1200&q=80') center / cover no-repeat;
 
  /* Estilos de tipografía */
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
}

Por qué esto es esencial para la accesibilidad en UI:

Un gradiente semitransparente que va desde rgba(0, 0, 0, 0.1) hasta rgba(0, 0, 0, 0.8) garantiza que el texto blanco de un título cumpla siempre con los requisitos de contraste WCAG 2.1 AA, sin importar el brillo de la fotografía que esté debajo.

3. Crear efectos de duotono y contraste con background-blend-mode

Si quieres que los colores del gradiente interactúen con los píxeles de la imagen en lugar de simplemente colocarse encima como un filtro oscuro, usa background-blend-mode:

.duotone-card {
  min-height: 450px;
  border-radius: 16px;
 
  /* Gradiente vibrante de dos colores */
  background-image: 
    linear-gradient(135deg, #4f46e5 0%, #ec4899 100%),
    url('https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&w=1200&q=80');
  
  background-size: cover;
  background-position: center;
 
  /* Modo de fusión */
  background-blend-mode: multiply;
}

Modos de fusión comunes para fotografía:

• multiply: Oscurece la imagen y proyecta los colores del gradiente en los medios tonos y luces (ideal para portadas estilo duotono como las de Spotify).
• overlay: Aumenta el contraste, haciendo las luces más brillantes y las sombras más intensas mientras conserva los detalles de la imagen.
• screen: Aclara la composición general (excelente para estéticas suaves y luminosas).
• luminosity: Conserva la luminosidad de la imagen mientras tiñe todos los colores con la paleta del gradiente.

4. CSS moderno: transiciones suaves de color con color-mix()

En el CSS moderno, puedes definir paradas de opacidad suaves sin calcular manualmente los valores alfa en RGB gracias a color-mix():

.modern-gradient {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, #0ea5e9 30%, transparent) 0%,
    color-mix(in srgb, #0f172a 90%, transparent) 100%
  );
}

Resumen

Combinar gradientes de CSS con imágenes de fondo te da un control visual enorme sin costo de rendimiento en tiempo de ejecución:

1. Coloca la capa del gradiente antes de la imagen url() en la propiedad background.
2. Usa gradientes lineales verticales oscuros (180deg) para garantizar la legibilidad del texto sobre imágenes hero.
3. Usa background-blend-mode: multiply u overlay para crear efectos de duotono llamativos.
4. Aprovecha los espacios de color modernos (rgb(r g b / a) y color-mix()) para lograr paradas de color limpias y suaves.