Degradados de ensueño: pasteles brumosos y luz suave

Un degradado de ensueño es una mezcla pálida y brumosa de colores cercanos, lila hacia melocotón, rubor hacia crema, iluminada desde un punto suave para que parezca luz y no pintura. Tres cosas lo hacen funcionar: tintes de baja saturación, bordes tan suaves que no se ve dónde termina un color y un núcleo luminoso descentrado. Abajo tienes ocho códigos para copiar, un método para crear el tuyo y la tinta que mantiene legibles las palabras sobre algo tan claro.

Qué hace que un degradado parezca de ensueño

De ensueño es un ambiente, así que ayuda ponerle nombre a las partes. Un degradado de ensueño es casi todo muy claro: casi todos sus colores pasarían por blanco en una habitación en penumbra. Los tonos son vecinos, así que la mezcla nunca pasa por el gris. Y la luz tiene una dirección. Una zona es más luminosa y cálida, como si el sol estuviera justo fuera del encuadre, y todo lo demás se aleja de ella hacia la bruma.

Compáralo con un degradado pastel, que puede ser plano y alegre, o con un degradado desenfocado, que puede ser de cualquier color. El de ensueño queda entre ambos: colores pastel, luz difuminada y un poco de bruma por encima.

Códigos de degradados de ensueño para copiar

Cada uno es un único valor CSS. Los degradados radiales con una elipse descentrada dan la sensación de una fuente de luz; los dos lineales son para banners y franjas largas, donde un radial se vería descompensado.

Lavanda a la luz de la luna es el único con un borde algo más profundo. Encaja en temas nocturnos, apps para dormir y listas de nanas, donde la crema pura resultaría demasiado luminosa.

Cómo crear tu propio degradado de ensueño

1. 1

   Elige una familia de tonos

   Escoge dos o tres tonos que estén a menos de un cuarto de vuelta en el círculo cromático: rosa, lila y azul, o melocotón, rubor y lila. Los opuestos como melocotón y azul se encuentran en el gris, el problema que se describe en degradados sucios.

2. 2

   Sube la luminosidad, baja la saturación

   Lleva cada color cerca del blanco. En OKLCH, apunta a una luminosidad de entre 0,92 y 0,96 y un croma por debajo de 0,05. El color debe ser una sugerencia, no una declaración.

3. 3

   Coloca la luz

   Pon la parada más cálida y clara en el centro de una elipse y desplaza ese centro fuera del medio, normalmente hacia una esquina superior. Una luz que viene de algún sitio es lo que convierte lo pálido en ensueño.

4. 4

   Separa las paradas

   Reparte las paradas para que ninguna banda sea más estrecha que un tercio del encuadre. Las paradas apretadas crean anillos, y los anillos rompen la bruma.

5. 5

   Añade un susurro de grano

   Una capa de ruido fino con una opacidad muy baja hace que la superficie parezca película o papel y oculta las bandas. Degradados con grano muestra cómo.

Un fondo degradado de ensueño en CSS

Un degradado radial da una luz. Dos o tres, en capas sobre una base pálida, dan esa cualidad flotante y nubosa a la que la gente se refiere con «de ensueño». Mezcla en OKLCH para que los centros queden limpios; interpolación de degradados explica por qué.

.dreamy {
  min-height: 100vh;
  background-color: #f6f2fb; /* fallback */
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 15% in oklch, #fde8d4 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 85% 35% in oklch, #efe1fb 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 100% in oklch, #dde7fb 0%, transparent 70%),
    linear-gradient(170deg, #fbf3f6 0%, #f3eefb 100%);
}

Cómo poner texto sobre un degradado de ensueño

El texto blanco desaparece sobre un degradado de ensueño y el negro puro resulta duro, como si alguien hubiera estampado un formulario sobre una acuarela. La respuesta es una tinta profunda de la misma familia: ciruela sobre una mezcla rosa y lila, azul pizarra sobre una brumosa, un marrón cálido sobre melocotón. Se lee con claridad y sigue formando parte de la imagen.

Aquí es donde Gradiently se gana su sitio. Un Mark sabe dónde están las palabras: coloca su zona más tranquila detrás de ellas, oscurece los colores cerca de las letras y elige tinta clara u oscura para cada línea a partir de su propia paleta, así que un fondo suave nunca te cuesta legibilidad. Para las reglas generales, lee texto sobre un degradado.

Dónde funcionan los degradados de ensueño

Lo de ensueño se percibe como amable, personal y sin prisas. Eso lo hace adecuado para algunas marcas y equivocado para otras. Una cuenta atrás de descuentos en bruma lila resulta confusa; el lanzamiento de una línea de cosmética, justo lo contrario.

• Bienestar y cosmética: lanzamientos de producto, rutinas y citas, normalmente como publicaciones de Instagram a 1080×1350.
• Bodas e invitaciones: una invitación de 5×7 pulgadas a 1500×2100 con un lavado melocotón y rubor y un nombre en serifa.
• Música y audio: un Spotify Canvas a 1080×1920 o una portada de Apple Podcasts a 3000×3000 para programas de calma, sueño o ambiente.
• Diarios y boletines: una cabecera de publicación de Substack a 1456×816 que marca un tono tranquilo antes de la primera palabra.
• Fondos de pantalla e historias: lo bastante suaves para quedar detrás de iconos o stickers sin competir con ellos.

Si lo de ensueño se está convirtiendo en el estilo de tu marca y no en una sola publicación, plantéate que nadie más pueda usarlo. Cada Mark de Gradiently tiene un único propietario a la vez, así que un lila brumoso que reserves sigue siendo tuyo, renderizado de nuevo en cada tamaño en el que diseñes. Para la familia más amplia de estilos suaves, mira degradados aurora.