Degradados difuminados: color desenfocado con aire moderno

Un degradado difuminado es color sin bordes: unas pocas formas suaves sobre un fondo, desenfocadas hasta que solo queda luz que pasa de un tono al siguiente. Parece una fotografía tomada a través de un cristal esmerilado, o un objetivo desenfocado ante una ciudad iluminada. Esa suavidad es la razón por la que encaja con apps de bienestar, música, cosmética, tecnología serena y fondos de pantalla. El método es sencillo: primero las formas, después mucho desenfoque y luego grano. Los detalles que siguen marcan la diferencia entre algo onírico y algo emborronado.

Degradados difuminados frente a degradados aurora y mesh

Estos tres se confunden porque todos parecen suaves. Nacen de ideas distintas, y elegir el adecuado cambia el briefing.

Cómo hacer un degradado difuminado

1. 1

   Elige un fondo

   Un blanco roto pálido para algo aireado, una tinta profunda para algo que brilla. El fondo llena cada hueco que dejan las formas.

2. 2

   Elige tres o cuatro colores vecinos

   Los colores cercanos en la rueda, como rosa, lila y azul cielo, se mezclan en tonos intermedios limpios. Lee colores análogos para más combinaciones.

3. 3

   Dibuja formas grandes y superpuestas

   De tres a cinco círculos u óvalos, cada uno ocupando entre un cuarto y la mitad del lienzo. Deja que algunos se salgan por los bordes.

4. 4

   Desenfoca mucho

   Aplica un desenfoque gaussiano de aproximadamente el 10 al 20 por ciento del lado más corto del lienzo. En una publicación de 1080 píxeles de ancho, eso son unos 110 a 220 píxeles.

5. 5

   Añade grano

   Una capa de ruido fino al 3 a 6 por ciento de opacidad oculta las bandas y evita que el resultado parezca de plástico.

6. 6

   Compruébalo a tamaño de móvil

   Redúcelo. Si alguna forma todavía tiene un borde visible, desenfoca más o agranda la forma.

Recetas de color para degradados difuminados

Cada muestra aproxima el aspecto final en un solo degradado, así que puedes copiarla directamente en CSS o usar los colores para tus formas. Los degradados radiales elípticos con posiciones descentradas se acercan sorprendentemente a un desenfoque real.

Elige la familia según lo que vaya encima. Los difuminados claros sostienen bien el texto oscuro y encajan con cosmética, papelería, bienestar y portadas editoriales. Los oscuros hacen brillar el texto claro y encajan con vida nocturna, música y eventos tardíos. Un difuminado neutro, como el lino, funciona como telón discreto para fotos de producto, donde el color nunca debe competir con el objeto. Para más paletas suaves, consulta degradados oníricos.

Cuánto desenfoque necesita un degradado difuminado

La mayoría de los degradados difuminados fallan por no estar lo bastante desenfocados. Una forma desenfocada 30 píxeles en un lienzo de 1080 píxeles sigue siendo una forma con un borde suave, que se lee como una mancha. El efecto necesita un desenfoque lo bastante grande para que no se sepa dónde termina cada forma.

Un degradado difuminado en CSS

En la web tienes dos caminos. Las capas de degradados radiales que se desvanecen a transparente son baratas y se renderizan al instante. Los elementos realmente desenfocados se ven más suaves y pueden desplazarse, pero cuesta más dibujarlos. Para un fondo estático, las capas suelen bastar.

/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }

Si lo que necesitas es un panel esmerilado sobre un fondo desenfocado y no el fondo en sí, eso es backdrop-filter, que se trata en backdrop filter en CSS.

Por qué los degradados difuminados parecen baratos, y cómo arreglarlo

Las bandas son lo que pilla a todo el mundo, porque un desenfoque crea transiciones largas y suaves a lo largo de muchos píxeles. Un poco de grano lo arregla; bandas en los degradados explica por qué. Y si dos de tus colores se encuentran en un gris, cambia uno por un vecino, como se describe en degradados turbios.

Los Marks de Gradiently incluyen materiales suaves y difusos con grano integrado, y mantienen tranquila la zona detrás de tus palabras, así que un aspecto difuminado nunca se traga el titular. Puedes diseñar gratis en el Studio con cualquier Mark sin reservar.