# Degradados transparentes en CSS: fundidos, capas y velos

[Canonical HTML page](https://gradiently.design/es/guide/css-gradient-transparent)

Un degradado que se funde hasta desaparecer es una de las herramientas más útiles de CSS. Antes dejaba además una mancha gris en el centro. Así funciona hoy la transparencia en los degradados, con los patrones que merece la pena conservar.

## The short version

- Para hacer transparente un degradado CSS, usa un color con alfa cero como una de las paradas, por ejemplo transparent o rgb(124 58 237 / 0).
- Los navegadores modernos interpolan los colores de los degradados con alfa premultiplicado, así que fundir un color con la palabra clave transparent ya no produce una franja gris.
- Un degradado de fondo solo puede desvanecer el fondo; para desvanecer el contenido real de un elemento, usa mask-image con un degradado.
- Un velo con varias paradas suavizadas se ve más suave que un fundido de dos paradas, que deja un borde visible donde termina el oscurecimiento.
- Un degradado radial transparente en el centro y oscuro fuera crea un foco que atrae la atención hacia una zona.

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

| Escribes | Significa | Úsalo cuando |
| --- | --- | --- |
| `transparent` | Negro con alfa cero | Quieras desvanecer cualquier color, en navegadores modernos |
| `rgb(124 58 237 / 0)` | Este violeta con alfa cero | Quieras ser explícito o dar soporte a navegadores muy antiguos |
| `rgb(124 58 237 / 0.4)` | Este violeta al 40 por ciento | Quieras un tinte que nunca desaparezca del todo |
| `#7c3aed66` | Hex de ocho dígitos, más o menos al 40 por ciento | Uses herramientas de diseño que exportan hex con alfa |
| `color-mix(in srgb, var(--brand) 40%, transparent)` | El color de una variable al 40 por ciento | Trabajes con colores guardados en propiedades personalizadas |

Cinco formas de decir algo parecido. La forma con `color-mix()` es la única que funciona con un color que solo conoces como variable; consulta [color-mix() en CSS](https://gradiently.design/es/guide/css-color-mix).

## 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.

### Comportamiento antiguo

- De blanco a `transparent` pasa por gris
- Los canales de color se mezclan sin tener en cuenta la opacidad
- Solución: repetir el color con alfa cero

### Navegadores actuales

- De blanco a `transparent` sigue siendo blanco mientras se funde
- Alfa premultiplicado, como exige la especificación
- Las dos formas funcionan; la explícita es más portable

- Violeta que se desvanece: `linear-gradient(to bottom, #7c3aed 0%, rgb(124 58 237 / 0) 100%)`
- Verde azulado que se funde al 70%: `linear-gradient(to right, #0f766e 0%, rgb(15 118 110 / 0) 70%)`
- Brillo naranja sobre nada: `radial-gradient(circle at 30% 30%, #f97316 0%, rgb(249 115 22 / 0) 60%)`

Tres fundidos mostrados sobre el propio fondo de esta página, que es exactamente lo que hacen en tu maqueta. Apila fundidos como estos sobre un color base para crear fondos suaves por capas.

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](https://gradiently.design/es/guide/css-linear-gradient).

## 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.

```css
/* 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%);
}
```

Las máscaras desvanecen lo que haya, sobre cualquier color de página, claro u oscuro. `mask-image` sin prefijo funciona en los navegadores actuales; añade `-webkit-mask-image` para Safari antiguos.

La alternativa antigua era un degradado blanco colocado sobre el contenido. Se rompe en cuanto la página no es blanca, en [modo oscuro](https://gradiently.design/es/guide/dark-mode-design) 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.

Velo suavizado, siete paradas: `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%)`

La opacidad baja deprisa cerca del texto y despacio cerca de arriba, lo que se lee como una sombra natural y no como una franja.

```css
.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;
}
```

El velo es la primera capa del fondo, así que queda encima de la foto.

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](https://gradiently.design/es/guide/css-gradient-overlay) trata los baños de color y los modos de fusión, y [texto sobre imagen](https://gradiently.design/es/guide/text-over-image) la colocación.

## Huecos transparentes y focos

Dale la vuelta a la idea: transparente en el centro, oscuro fuera. Un [degradado radial](https://gradiently.design/es/guide/css-radial-gradient) 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.

```css
.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
  );
}
```

Define `--x` y `--y` desde JavaScript para mover el foco. La transición de 80 píxeles entre las paradas mantiene el borde suave.

Un post vertical de producto en el que el titular queda sobre una zona luminosa del degradado

Sin ningún ajuste, las palabras compiten con la parte más luminosa del fondo.

El mismo post de producto con una zona más tranquila y profunda del degradado detrás del titular

El fondo se calma detrás de las palabras, el trabajo que hace un velo en una web.

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.

## FAQ

### ¿Cómo hago que un degradado CSS se funda a transparente?

Usa un color con alfa cero como última parada: `linear-gradient(#7c3aed, transparent)` o, para ser explícito, `linear-gradient(#7c3aed, rgb(124 58 237 / 0))`.

### ¿Por qué mi degradado a transparente se ve gris?

Los navegadores antiguos mezclan sin alfa premultiplicado, así que `transparent` (negro transparente) agrisa el centro. Funde mejor hacia tu propio color con alfa cero.

### ¿Cómo desvanezco un texto o una imagen con CSS?

Usa `mask-image` con un degradado, como `mask-image: linear-gradient(#000 60%, transparent)`. El elemento se desvanece sobre cualquier color de fondo.

### ¿Qué es un velo (scrim) en CSS?

Un degradado que oscurece parte de una imagen detrás del texto y se funde a transparente en el resto, para que el texto se lea y la imagen siga luminosa.

### ¿Puede un degradado CSS tener un hueco transparente?

Sí. Un degradado radial transparente en el centro y oscuro hacia fuera deja un foco despejado sobre lo que haya debajo.