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

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.

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.

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.

Si quieres un poco más de color manteniendo el mismo aire ligero, los degradados pastel son el siguiente paso. Para el extremo opuesto de la escala neutra, consulta los códigos de degradados grises.

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.

Los fondos para fotos de producto 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.

/* 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;
}

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 profundiza en fundidos y superposiciones.

Blanco limpio, no deslavazado

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.

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 tienen más ideas en el mismo espíritu, y los fondos de hero web muestran cómo un degradado porcelana o de luz de la mañana puede sostener toda una landing.

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.