Gradientes sonhadores: tons pastel enevoados e luz suave

Um gradiente sonhador é uma mistura clara e enevoada de cores próximas, lilás para pêssego, rosado para creme, iluminada por um ponto suave para parecer luz e não tinta. Três coisas fazem ele funcionar: tons pouco saturados, bordas tão suaves que você não vê onde uma cor termina, e um núcleo claro fora do centro. Abaixo estão oito códigos para copiar, um método para criar o seu e a tinta que mantém o texto legível sobre algo tão claro.

O que faz um gradiente parecer sonhador

Sonhador é um clima, então ajuda dar nome às partes. Um gradiente sonhador é quase todo muito claro: quase todas as cores nele passariam por branco num cômodo pouco iluminado. Os matizes são vizinhos, então a mistura nunca passa pelo cinza. E a luz tem direção. Uma área é mais clara e mais quente, como se o sol estivesse logo fora do quadro, e todo o resto se afasta dela numa névoa.

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

Códigos de gradiente sonhador para copiar

Cada um destes é um único valor CSS. 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 longas, onde um radial pareceria torto.

Lavanda ao luar é o único com uma borda um pouco mais profunda. Ele combina com temas noturnos, apps de sono e playlists de ninar, onde um creme puro pareceria claro demais.

Como criar seu próprio gradiente sonhador

1. 1

   Escolha uma família de matizes

   Escolha dois ou três matizes que fiquem dentro de mais ou menos um quarto de volta do círculo cromático: rosa, lilás e azul, ou pêssego, rosado e lilás. Opostos como pêssego e azul se encontram no cinza, que é o problema descrito em gradientes sujos.

2. 2

   Aumente a luminosidade, diminua a saturação

   Leve cada cor para perto do branco. Em OKLCH, mire numa luminosidade de 0,92 a 0,96 e num croma abaixo de uns 0,05. A cor deve ser uma sugestão, não uma afirmação.

3. 3

   Posicione a luz

   Coloque a parada mais quente e mais clara no centro de uma elipse e tire esse centro do meio, normalmente para um canto de cima. Luz que vem de algum lugar é o que transforma claro em sonhador.

4. 4

   Espalhe as paradas

   Espalhe bem as paradas para que nenhuma faixa seja mais estreita que um terço do quadro. Paradas apertadas formam anéis, e anéis quebram a névoa.

5. 5

   Acrescente um sussurro de granulado

   Uma camada de ruído fino com opacidade bem baixa faz a superfície parecer filme ou papel e esconde o banding. Gradientes granulados mostra como.

Um fundo em gradiente sonhador em CSS

Um gradiente radial dá uma luz. Dois ou três, em camadas sobre uma base clara, dão a qualidade flutuante e nublada que as pessoas chamam de sonhadora. Misture em OKLCH para que os meios fiquem limpos; interpolação de gradientes 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%);
}

Como colocar texto sobre um gradiente sonhador

Texto branco some num gradiente sonhador e o preto puro parece duro, como se alguém tivesse carimbado um formulário numa aquarela. A resposta é uma tinta profunda tirada da mesma família: ameixa sobre uma mistura de rosa e lilás, azul ardósia sobre uma enevoada, um marrom quente sobre pêssego. Ela se lê com clareza e ainda parece parte da imagem.

É aqui que o Gradiently faz diferença. Um Mark sabe onde está o texto: ele move sua região mais calma para trás das palavras, aprofunda as cores perto das letras e escolhe tinta clara ou escura em cada linha a partir da própria paleta, então um fundo suave nunca custa legibilidade. Para as regras gerais, leia texto sobre gradiente.

Onde os gradientes sonhadores funcionam

O sonhador transmite algo gentil, pessoal e sem pressa. Isso o torna certo para algumas marcas e errado para outras. Uma contagem regressiva de desconto em névoa lilás parece confusa; um lançamento de skincare nela parece exatamente certo.

• Bem-estar e skincare: lançamentos, rotinas e citações, normalmente como posts do Instagram em 1080×1350.
• Casamentos e convites: um convite de 5×7 in em 1500×2100, com um véu de pêssego e rosado e o nome numa serifada.
• 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 post do Substack em 1456×816 que define um tom tranquilo antes da primeira palavra.
• Papéis de parede de celular e stories: suave o bastante para ficar atrás de ícones ou figurinhas sem brigar com eles.

Se o sonhador está virando o visual da sua marca, e não só de um post, pense em torná-lo algo que mais ninguém possa usar. Cada Mark no Gradiently tem um dono por vez, então um lilás enevoado que você reserva continua seu, renderizado de novo em cada tamanho em que você cria. Para a família mais ampla de visuais suaves, veja gradientes aurora.