# Degradado blanco: códigos de luz sutil para diseños limpios

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

Un degradado blanco es el más silencioso que existe, y el que casi todos los diseñadores hacen algo mal. Estos códigos muestran cuánto cambio basta, qué tintes usar y cómo fundir limpiamente a blanco.

## The short version

- Un degradado blanco mezcla blanco puro con un blanco roto solo unos puntos más oscuro, teñido de cálido, frío o nacarado.
- Los blancos rotos con un ligero tinte cálido se sienten como papel; los de un ligero tinte azul, como porcelana o nieve.
- Un degradado blanco necesita rango suficiente para sobrevivir a pantallas de móvil brillantes, donde las diferencias muy pequeñas desaparecen.
- Para fundir contenido en un fondo blanco en CSS, usa un degradado de `rgb(255 255 255 / 0)` a `#ffffff`.
- Los degradados blancos son excelentes fondos de producto porque una caída suave se lee como un estudio iluminado y no como un recorte plano.

Un **degradado blanco** va del blanco puro a un blanco roto solo un poco más oscuro, normalmente con un suave tinte cálido, frío o nacarado. El cambio es pequeño a propósito: debe sentirse como luz cayendo sobre una superficie, no como color. Eso hace que los degradados blancos sean ideales para webs limpias, fotos de producto, invitaciones y publicaciones sociales minimalistas. Abajo verás cuánta fuerza darle, una paleta de blancos rotos, códigos copiables y la forma correcta de fundir a blanco en CSS.

## Cuánto cambio necesita un degradado blanco

Si es muy poco, nadie lo ve, sobre todo en un móvil a brillo máximo. Si es demasiado, el blanco se vuelve gris y sucio. La tabla da tres intensidades, medidas por lo lejos que queda el color final del blanco puro. La mayoría de los diseños quieren la del medio.

| Intensidad | Desde | Hasta | Úsalo para |
| --- | --- | --- | --- |
| Susurro | `#ffffff` | `#f8f8f8` | Grandes secciones web, lectura larga |
| Suave | `#ffffff` | `#efefef` | Tarjetas, publicaciones sociales, invitaciones |
| Visible | `#ffffff` | `#e2e2e2` | Fondos de producto, fondos de estudio |

Valores neutros por claridad. En la práctica, tiñe ligeramente de cálido o frío el color final, como en los códigos de abajo.

## Colores de blanco roto para construir

Los grises neutros puros al final de un degradado blanco se ven algo sin vida. Un rastro de tinte marca la diferencia: los blancos rotos cálidos se leen como papel, lino y marfil; los fríos, como porcelana, escarcha y nieve. Elige el tinte que encaje con el resto de tu paleta y mantenlo en toda una serie de diseños.

- Blanco puro: #ffffff
- Marfil: #fffdf8
- Papel: #f6f4f0
- Lino: #f1ece3
- Porcelana: #f1f4f7
- Escarcha: #eaf2f8
- Lila perla: #f3eef8
- Menta perla: #eef6f6

Blancos rotos. En una página blanca se ven casi idénticos; uno junto a otro, las familias cálida y fría son claramente distintas.

## Códigos de degradado blanco

Cada uno de estos empieza en el blanco puro o cerca. Papel y marfil son cálidos y editoriales. Porcelana y escarcha son fríos y técnicos. La luz de la mañana añade un suave resplandor desde una esquina, y la perla mezcla varios tintes apenas perceptibles para una iridiscencia delicada que nunca llega a ser un arcoíris.

- Papel: `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`
- Marfil: `linear-gradient(150deg, #fffdf8 0%, #f8f1e4 100%)`
- Porcelana: `linear-gradient(160deg, #ffffff 0%, #f1f4f7 60%, #e6ebf0 100%)`
- Escarcha: `linear-gradient(180deg, #f8fbfd 0%, #eaf2f8 100%)`
- Luz de la mañana: `radial-gradient(ellipse at 20% 0%, #ffffff 0%, #fbf8f2 45%, #f1ece3 100%)`
- Perla: `linear-gradient(135deg, #fdfcfb 0%, #f3eef8 35%, #eef6f6 65%, #fbf7f0 100%)`

Seis degradados blancos. En una pantalla brillante se leen como superficies y no como colores, que es justo el objetivo.

Si quieres un poco más de color manteniendo el mismo aire ligero, los [degradados pastel](https://gradiently.design/es/guide/pastel-gradients) son el siguiente paso. Para el extremo opuesto de la escala neutra, consulta los códigos de [degradados grises](https://gradiently.design/es/guide/grey-gradient).

## Un degradado blanco detrás de productos

Los fotógrafos iluminan un fondo blanco para que caiga suavemente hacia los bordes, lo que separa el objeto del fondo sin una línea de sombra. Un degradado radial blanco hace lo mismo en pantalla. Es especialmente útil cuando recortas un producto de su foto: un blanco plano detrás parece pegado, mientras que un barrido suave parece un estudio.

Fondo de estudio: `radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f3f3f3 55%, #e2e2e2 100%)`

Más brillante justo sobre el centro, donde se apoya el producto, y cayendo a un gris claro en las esquinas. Úsalo a 2048×2048 para imágenes de producto de Shopify.

Los [fondos para fotos de producto](https://gradiently.design/es/guide/product-photo-backgrounds) tratan sombras, fondos de color y cuándo el blanco es la elección equivocada.

## Fundido a blanco con un degradado CSS

El degradado blanco más habitual en la web no es un fondo: es un fundido que suaviza el final de un artículo recortado, la parte inferior de una lista con scroll o el borde de una foto. Escribe el extremo transparente como blanco con opacidad cero. Los navegadores modernos mezclan `transparent` correctamente, pero `rgb(255 255 255 / 0)` dice exactamente lo que quieres y evita la banda grisácea que dibujaban algunos motores antiguos.

```css
/* soften the end of a clipped block of text */
.excerpt {
  position: relative;
  max-height: 12rem;
  overflow: hidden;
}

.excerpt::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, #ffffff 90%);
  pointer-events: none;
}
```

Un fundido que termina en blanco sólido justo antes del borde inferior, para que la última línea de texto desaparezca limpiamente. Haz coincidir el color final con el fondo de tu página.

Si el fondo de tu página es un blanco roto y no blanco puro, funde a ese color, o el fundido terminará en una franja más clara visible. El [degradado CSS transparente](https://gradiently.design/es/guide/css-gradient-transparent) profundiza en fundidos y superposiciones.

## Blanco limpio, no deslavazado

### Deslavazado

- Terminar en un gris medio neutro
- Cambios tan pequeños que desaparecen en un móvil
- Texto gris claro sobre un degradado blanco roto
- Blancos rotos cálidos y fríos mezclados
- Fundir a blanco sobre una página crema

### Limpio

- Terminar en un blanco roto ligeramente teñido
- Un cambio suave pero visible, comprobado en un móvil
- Texto casi negro o azul marino profundo
- Una sola familia de tinte
- Fundir al color de fondo exacto de la página

Los degradados blancos también forman bandas, aunque menos que los oscuros; si ves escalones en un monitor grande, un grano muy fino lo arregla, como se explica en [banding en degradados](https://gradiently.design/es/guide/gradient-banding).

## Degradados blancos en diseños minimalistas

Los diseños minimalistas viven o mueren por su tipografía, y el blanco no le deja dónde esconderse. Usa una tinta fuerte, casi negra, mucho espacio y un detalle en color. Un degradado blanco añade justo la dimensión necesaria para que la página se sienta iluminada y terminada. Los [fondos minimalistas](https://gradiently.design/es/guide/minimalist-backgrounds) tienen más ideas en el mismo espíritu, y los [fondos de hero web](https://gradiently.design/es/guide/website-hero-background) muestran cómo un degradado porcelana o de luz de la mañana puede sostener toda una landing.

Una invitación de boda vertical con fondo blanco marfil suave y las palabras Te esperamos en texto oscuro

Una invitación de 5×7 pulgadas sobre un Mark marfil suave. Tinta oscura, márgenes generosos y nada más.

En Gradiently, los Marks claros funcionan igual que los atrevidos: el Mark mantiene una zona tranquila detrás de las palabras y la tinta automática elige un color de texto oscuro de la propia paleta del Mark, así que un blanco delicado nunca acaba con texto gris que desaparece.

## FAQ

### ¿Cuál es un buen código de degradado blanco?

Para un aspecto suave de papel, prueba `linear-gradient(180deg, #ffffff 0%, #f6f4f0 100%)`. Para un aspecto frío de porcelana, termina en #e6ebf0.

### ¿Cómo hago un degradado de blanco a transparente en CSS?

Usa `linear-gradient(180deg, rgb(255 255 255 / 0), #ffffff)`. Cambia el color final por el fondo de tu página si no es blanco puro.

### ¿Por qué mi degradado blanco es invisible?

El color final está demasiado cerca del blanco. Oscurécelo hasta unos #efefef, teñido ligeramente de cálido o frío, y compruébalo en un móvil a brillo máximo.

### ¿Qué color de texto funciona sobre un degradado blanco?

Casi negro, carbón o azul marino profundo. Evita el texto gris claro, que se desvanece en el extremo más oscuro del degradado.