# Gradientes sonhadores: pastéis esbatidos e luz suave

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

Os gradientes sonhadores parecem a primeira luz da manhã através de uma cortina: pálidos, esbatidos e ligeiramente quentes. Aqui ficam 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 pálidas, de baixa saturação e com tons próximos, misturadas sem arestas duras.
- A sensação de sonho vem da luz: uma zona suave e brilhante fora do centro, a esbater-se numa base esbatida.
- Os gradientes sonhadores leem-se melhor com uma tinta profunda e tingida, como ameixa ou ardósia, em vez de texto branco ou preto puro.
- Misturar em OKLCH mantém as cores pálidas limpas a meio, onde uma mistura sRGB pode ficar calcária ou cinzenta.
- Um grão fino evita que os gradientes pálidos formem bandas quando são comprimidos para as redes sociais.

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.

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

Cinco tons que combinam e uma tinta profunda. Os tons partilham a luminosidade, por isso quaisquer dois se misturam bem; a ameixa é para as palavras.

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

- 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 de nuvem: `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. O tom mais profundo de qualquer um deles continua pálido, e é isso que mantém o ambiente suave.

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

Construído a partir dos 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 de pêssego no canto superior esquerdo, depois rosa-pálido, lilás e um azul ténue na margem oposta. Todos os pontos têm luminosidade acima de 0,9.

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

```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 pálida: pêssego em cima à esquerda, lilás à direita, azul-pó a subir de baixo.

> **Os gradientes pálidos formam bandas primeiro** As misturas muito claras têm poucos valores de cor distintos entre os pontos, por isso uma compressão forte transforma-os em riscas visíveis. Exporta em PNG para publicações sociais e junta grão. As [bandas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) trazem as soluções.

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

### Evitar

- Texto branco ou cinzento pálido
- Preto puro em peso forte
- O núcleo mais brilhante atrás do título
- Letra cursiva fina em tamanhos pequenos
- Uma caixa ou brilho atrás das palavras para salvar o contraste

### Fazer

- Uma tinta profunda e tingida: ameixa, ardósia, cacau
- Pesos normal ou médio com espaçamento generoso
- Palavras na zona mais calma e uniforme da névoa
- Uma serifa ou uma sem serifa suave num tamanho firme
- Contraste verificado onde cada linha realmente fica

Uma publicação de citação sonhadora e pálida, com a parte mais brilhante do gradiente atrás do texto, que o apaga

O núcleo brilhante cai atrás das palavras e a linha fica ténue.

A mesma publicação de citação sonhadora com uma zona mais calma do gradiente atrás do texto, que agora se lê com clareza

A mesma publicação com a zona calma atrás das palavras e uma tinta mais profunda.

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

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

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

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

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

## FAQ

### Que cores fazem um gradiente sonhador?

Tons pálidos e de baixa saturação, próximos no círculo cromático: rosa-pálido, lilás, azul-pó, pêssego e creme. Mantém todos os pontos muito claros.

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

Pastel descreve as cores. Sonhador acrescenta luz suave e direcional e névoa, para o gradiente parecer iluminado e não plano.

### Que cor de texto funciona num gradiente sonhador?

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

### Porque é que o meu gradiente sonhador tem riscas?

As misturas pálidas têm poucos degraus de cor entre pontos, por isso a compressão mostra-os como bandas. Exporta em PNG, alarga os pontos e junta um grão fino.

### Como faço um gradiente sonhador em CSS?

Sobrepõe dois ou três gradientes radiais fora do centro que esbatem para transparente sobre uma base linear pálida, e mistura-os `in oklch` para manter os meios limpos.