# Gradientes sonhadores: tons pastel enevoados e luz suave

[Canonical HTML page](https://gradiently.design/pt-br/guide/dreamy-gradients)

Gradientes sonhadores parecem a primeira luz atravessando uma cortina: claros, enevoados e levemente quentes. Veja o que os faz funcionar, oito códigos para copiar e a tinta que se lê sobre eles.

## The short version

- Um gradiente sonhador usa cores claras e pouco saturadas, de matizes próximos, misturadas sem nenhuma borda dura.
- A sensação sonhadora vem da luz: uma área suave e clara, fora do centro, que se dissolve num fundo enevoado.
- Gradientes sonhadores se leem melhor com uma tinta profunda e tingida, como ameixa ou ardósia, do que com texto branco ou preto puro.
- Misturar em OKLCH mantém as cores claras limpas no meio, onde uma mistura em sRGB pode ficar calcária ou acinzentada.
- Um granulado fino impede que gradientes claros mostrem banding quando são comprimidos para as redes sociais.

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.

- Creme da manhã: #fdf6f0
- Véu rosado: #fbe3e8
- Névoa lilás: #efe1fb
- Céu talco: #dde7fb
- Luz pêssego: #fde8d4
- Tinta ameixa: #4a3352

Cinco tons que combinam entre si e uma tinta profunda. Os tons têm a mesma luminosidade, então quaisquer dois deles se misturam de forma limpa; a ameixa é para o texto.

Compare com um [gradiente pastel](https://gradiently.design/pt-br/guide/pastel-gradients), que pode ser chapado e alegre, ou um [gradiente desfocado](https://gradiently.design/pt-br/guide/blurry-gradient), 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.

- Primeira luz: `radial-gradient(ellipse 90% 70% at 30% 25%, #fde8d4 0%, #fbe3e8 35%, #efe1fb 70%, #f6f2fb 100%)`
- Manhã lilás: `radial-gradient(ellipse 80% 80% at 70% 30%, #fbe3e8 0%, #efe1fb 45%, #dde7fb 100%)`
- Brilho da janela: `radial-gradient(ellipse 100% 70% at 50% 0%, #fff4e6 0%, #fde2e4 40%, #e9e3f7 100%)`
- Bruma do mar: `radial-gradient(ellipse 85% 75% at 25% 70%, #e0f2f1 0%, #e6e9fb 45%, #f5e9f7 100%)`
- Névoa da hora dourada: `radial-gradient(ellipse 90% 80% at 65% 60%, #fcefd8 0%, #f8dde0 40%, #e8dcef 80%, #dcd6ea 100%)`
- Madrepérola: `linear-gradient(160deg in oklch, #f9e7ef 0%, #ece3fa 50%, #dfeafb 100%)`
- Crepúsculo nublado: `linear-gradient(180deg, #dfe6f7 0%, #ecdff3 45%, #fbe6dc 100%)`
- Lavanda ao luar: `radial-gradient(ellipse 80% 70% at 40% 35%, #f3e8ff 0%, #d9d3f2 45%, #b8b6dc 100%)`

Oito gradientes sonhadores. A parada mais profunda de qualquer um deles ainda é clara, e é isso que mantém o clima suave.

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. **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](https://gradiently.design/pt-br/guide/muddy-gradients).
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. **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. **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. **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](https://gradiently.design/pt-br/guide/grainy-gradients) mostra como.

Feito com os passos: `radial-gradient(ellipse 95% 75% at 28% 22%, oklch(0.97 0.03 60) 0%, oklch(0.94 0.04 10) 40%, oklch(0.92 0.045 300) 75%, oklch(0.93 0.035 260) 100%)`

Luz pêssego no canto superior esquerdo, rosado, depois lilás e um azul tênue na borda mais distante. Todas as paradas ficam acima de 0,9 de luminosidade.

## 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](https://gradiently.design/pt-br/guide/gradient-interpolation) explica por quê.

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

Três luzes suaves sobre uma base clara: pêssego no canto superior esquerdo, lilás à direita, azul talco subindo de baixo.

> **Gradientes claros mostram banding primeiro** Misturas muito claras têm poucos valores de cor distintos entre as paradas, então uma compressão forte as transforma em listras visíveis. Exporte em PNG para posts nas redes sociais e acrescente granulado. [Banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) traz as soluções.

## 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.

### Evite

- Texto branco ou cinza-claro
- Preto puro num peso pesado
- O núcleo mais claro bem atrás do título
- Fonte cursiva fina em tamanhos pequenos
- Uma caixa ou brilho atrás do texto para salvar o contraste

### Faça

- Uma tinta profunda e tingida: ameixa, ardósia, cacau
- Pesos regulares ou médios com espaçamento generoso
- Texto na parte mais calma e uniforme da névoa
- Uma serifada ou uma sem serifa suave num tamanho confiante
- Contraste conferido onde cada linha realmente fica

Um post de citação claro e sonhador em que a parte mais clara do gradiente fica atrás do texto e o apaga

O núcleo claro cai atrás do texto e a frase fica apagada.

O mesmo post de citação sonhador com uma área mais calma do gradiente atrás do texto, que agora se lê com clareza

O mesmo post com a área calma atrás do texto e uma tinta mais profunda.

É 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](https://gradiently.design/pt-br/guide/text-on-gradient).

## 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.

Uma capa de podcast quadrada chamada Jardim Noturno sobre um fundo sonhador suave de lavanda e pêssego

Uma capa de podcast em 3000×3000. A cor sonhadora diz ao ouvinte como é o programa antes de ele ler o título.

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](https://gradiently.design/pt-br/guide/aurora-gradients).

## FAQ

### Quais cores formam um gradiente sonhador?

Tons claros e pouco saturados, próximos uns dos outros no círculo cromático: rosado, lilás, azul talco, pêssego e creme. Mantenha cada parada bem clara.

### Qual é a diferença entre um gradiente pastel e um sonhador?

Pastel descreve as cores. O sonhador acrescenta luz suave e direcional e névoa, então o gradiente parece iluminado em vez de chapado.

### Que cor de texto funciona sobre um gradiente sonhador?

Uma tinta profunda da mesma família, como ameixa, azul ardósia ou cacau. O branco some em fundos claros e o preto puro pode parecer duro.

### Por que meu gradiente sonhador tem listras?

Misturas claras têm poucos degraus de cor entre as paradas, então a compressão os mostra como faixas. Exporte em PNG, espalhe as paradas e acrescente um granulado fino.

### Como fazer um gradiente sonhador em CSS?

Empilhe dois ou três gradientes radiais fora do centro que se dissolvem em transparente sobre uma base linear clara, e misture-os `in oklch` para manter os meios limpos.