Degradados transparentes en CSS: fundidos, capas y velos

Para hacer transparente un degradado CSS, da a una de sus paradas un color con alfa cero: linear-gradient(to bottom, #7c3aed, transparent) funde el violeta hasta la nada y deja ver lo que haya debajo. Usa la misma idea para fundidos al final de un texto, velos oscuros detrás de pies de foto y capas de color sobre fotos. Para desvanecer el contenido de un elemento en lugar de su fondo, usa mask-image con un degradado.

Formas de escribir un color transparente

Por qué los fundidos se volvían grises

La palabra clave transparent es negro con alfa cero. Los primeros navegadores mezclaban por separado los canales rojo, verde y azul y el canal alfa, así que un fundido de blanco a transparent pasaba por un gris semitransparente por el camino. Por eso los tutoriales antiguos insisten en usar rgba(255, 255, 255, 0).

La especificación exige ahora alfa premultiplicado: cada color se pondera por su opacidad antes de mezclarse, así que una parada totalmente transparente no aporta ningún color. Todos los navegadores actuales lo hacen. Escribir el color correspondiente con alfa cero sigue siendo un hábito inofensivo, y te protege en clientes de correo y WebViews antiguos.

Dónde termina el fundido importa tanto como sus colores. Una parada al 70 por ciento termina el fundido pronto y deja el resto de la caja totalmente despejado, ideal para un tinte que solo debe tocar un borde. Dos paradas en la misma posición crean un corte seco del color a la nada, útil para barras a medio llenar y fondos divididos. Las posiciones de las paradas se explican en degradados lineales en CSS.

Desvanecer contenido con mask-image

Un degradado de fondo está detrás del contenido, así que no puede desvanecer texto, imágenes ni una lista con scroll. Una máscara sí. Con mask-image, las partes opacas del degradado mantienen visible el elemento y las transparentes lo ocultan. El color de la máscara no importa, solo su alfa.

/* Fade the last lines of a teaser paragraph */
.teaser {
  max-height: 9rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Soft edges on a horizontally scrolling row */
.carousel {
  overflow-x: auto;
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

/* Fade a photo into the page on any background colour */
.hero-photo {
  mask-image: linear-gradient(to bottom, #000 50%, transparent 95%);
}

La alternativa antigua era un degradado blanco colocado sobre el contenido. Se rompe en cuanto la página no es blanca, en modo oscuro por ejemplo, y bloquea los clics salvo que te acuerdes de pointer-events: none. Una máscara no tiene ninguno de esos problemas.

Velos: degradados transparentes para texto

Un velo oscurece parte de una imagen para que el texto que va encima se lea, y se funde hasta la transparencia total para que el resto de la foto siga luminoso. Un fundido de dos paradas funciona, pero su rampa recta deja una línea visible donde termina el oscurecimiento. Más paradas, espaciadas para suavizar la salida, esconden ese borde.

.card {
  background-image:
    linear-gradient(to top,
      rgb(2 6 23 / 0.8) 0%, rgb(2 6 23 / 0.62) 15%, rgb(2 6 23 / 0.42) 30%,
      rgb(2 6 23 / 0.24) 48%, rgb(2 6 23 / 0.1) 66%, rgb(2 6 23 / 0.03) 82%,
      rgb(2 6 23 / 0) 100%),
    url("/images/coast.jpg");
  background-size: cover;
  color: #f8fafc;
}

Tiñe el velo con una versión profunda del color de la foto en lugar de negro puro y se sentirá parte de la imagen. En una foto cálida de atardecer, un marrón profundo como rgb(41 20 8 / 0.75) se integra en la imagen, mientras que el negro parecería un filtro puesto encima. Superposición de degradado en CSS trata los baños de color y los modos de fusión, y texto sobre imagen la colocación.

Huecos transparentes y focos

Dale la vuelta a la idea: transparente en el centro, oscuro fuera. Un degradado radial colocado sobre una página o una imagen deja una zona iluminada y atenúa discretamente todo lo demás, algo que va bien en consejos de bienvenida, primeros planos de producto y diapositivas.

.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 40%),
    transparent 0 140px,
    rgb(2 6 23 / 0.72) 220px
  );
}

Para posts en redes e impresión, rara vez necesitas construir velos a mano. En Gradiently el propio Mark hace sitio a tus palabras, oscureciendo o aclarando los colores cerca de las letras, sin ninguna capa que ajustar en cada tamaño.