Gradientes sonhadores: pastéis esbatidos e luz suave

Um gradiente sonhador é uma mistura pálida e esbatida de cores próximas entre si, lilás em pêssego, rosa-pálido em creme, iluminada por um ponto suave, de modo a parecer luz e não tinta. Três coisas fazem-no funcionar: tons de baixa saturação, margens tão suaves que não se vê onde uma cor acaba e um núcleo brilhante fora do centro. Abaixo ficam oito códigos para copiar, um método para criares o teu e a tinta que mantém as palavras legíveis sobre algo tão claro.

O que faz um gradiente parecer sonhador

Sonhador é um ambiente, por isso ajuda dar nome às partes. Um gradiente sonhador é quase todo muito claro: quase todas as cores passariam por branco numa sala pouco iluminada. Os tons são vizinhos, por isso a mistura nunca passa pelo cinzento. E a luz tem direção. Uma zona é mais brilhante e quente, como se o sol estivesse mesmo fora do quadro, e tudo o resto se afasta dela para a névoa.

Compara com um gradiente pastel, que pode ser plano e alegre, ou com um gradiente desfocado, que pode ser de qualquer cor. O sonhador fica entre os dois: cores pastel, luz desfocada e um pouco de névoa por cima.

Códigos de gradientes sonhadores para copiar

Cada um destes é um único valor CSS. Os gradientes radiais com uma elipse fora do centro dão a sensação de uma fonte de luz; os dois lineares são para banners e faixas compridas, onde um radial ficaria torto.

A lavanda ao luar é a única com um bordo ligeiramente mais profundo. Serve temas noturnos, aplicações de sono e listas de canções de embalar, onde o creme puro pareceria demasiado brilhante.

Como criar o teu gradiente sonhador

1. 1

   Escolhe uma família de tons

   Escolhe dois ou três tons que fiquem a um quarto de volta do círculo cromático: rosa, lilás e azul, ou pêssego, rosa-pálido e lilás. Opostos como pêssego e azul encontram-se no cinzento, que é o problema descrito em gradientes lamacentos.

2. 2

   Sobe a luminosidade, baixa a saturação

   Empurra cada cor para perto do branco. Em OKLCH, aponta para uma luminosidade entre 0,92 e 0,96 e um croma abaixo de cerca de 0,05. A cor deve ser uma sugestão, não uma afirmação.

3. 3

   Coloca a luz

   Põe o tom mais quente e mais claro no centro de uma elipse e desloca esse centro para fora do meio, normalmente para um canto superior. É a luz que vem de algum lado que transforma o pálido em sonhador.

4. 4

   Estica os pontos de cor

   Espalha bem os pontos, para nenhuma faixa ficar mais estreita do que um terço do quadro. Pontos apertados fazem anéis, e os anéis quebram a névoa.

5. 5

   Junta um sopro de grão

   Uma camada de ruído fino, com muito pouca opacidade, faz a superfície parecer película ou papel e esconde as bandas. Os gradientes granulados mostram como.

Um fundo de gradiente sonhador em CSS

Um gradiente radial dá uma luz. Dois ou três, em camadas sobre uma base pálida, dão a qualidade à deriva e nublada a que as pessoas chamam sonhadora. Mistura em OKLCH para os meios ficarem limpos; a interpolação de gradientes explica porquê.

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

Como pôr texto num gradiente sonhador

O texto branco desaparece num gradiente sonhador e o preto puro parece duro, como se alguém carimbasse um formulário numa aguarela. A resposta é uma tinta profunda da mesma família: ameixa sobre uma mistura de rosa e lilás, azul-ardósia sobre uma enevoada, um castanho quente sobre pêssego. Lê-se com clareza e continua a fazer parte da imagem.

É aqui que o Gradiently mostra o seu valor. Um Mark sabe onde estão as palavras: desloca a sua zona mais calma para trás delas, aprofunda as cores junto às letras e escolhe tinta clara ou escura por linha a partir da sua própria paleta, por isso um fundo suave nunca te custa legibilidade. Para as regras gerais, lê texto sobre um gradiente.

Onde funcionam os gradientes sonhadores

O sonhador lê-se como suave, pessoal e sem pressa. Isso torna-o certo para algumas marcas e errado para outras. Uma contagem decrescente de desconto em névoa lilás parece confusa; o lançamento de um produto de cuidados de pele nela parece exatamente certo.

• Bem-estar e cuidados de pele: lançamentos de produtos, rotinas e citações, normalmente como publicações de Instagram em 1080×1350.
• Casamentos e convites: um convite de 5×7 pol. em 1500×2100 com um véu de pêssego e rosa-pálido e um nome em serifa.
• Música e áudio: um canvas do Spotify em 1080×1920 ou uma capa do Apple Podcasts em 3000×3000 para programas de calma, sono ou ambiente.
• Diários e newsletters: um cabeçalho de publicação do Substack em 1456×816 que define um tom tranquilo antes da primeira palavra.
• Fundos de telemóvel e stories: suaves o bastante para ficarem atrás de ícones ou autocolantes sem competir com eles.

Se o sonhador está a tornar-se o aspeto da tua marca e não só o de uma publicação, considera torná-lo algo que mais ninguém pode usar. Cada Mark no Gradiently tem um só dono de cada vez, por isso um lilás esbatido que reserves continua teu, desenhado de novo em cada tamanho em que crias. Para a família mais vasta de aspetos suaves, vê os gradientes aurora.