# Gradientes desfocados: cor em soft focus com ar moderno

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

Os gradientes desfocados parecem cor vista através de vidro fosco ou de uma lente fora de foco. São calmos, modernos e fáceis de fazer mal. Eis o método, com números.

## The short version

- Um gradiente desfocado faz-se pondo algumas formas suaves de cor sobre um fundo e desfocando-as até não restarem arestas.
- Os gradientes desfocados diferem dos gradientes aurora: a aurora são fitas de luz num céu escuro, enquanto o gradiente desfocado é cor difusa sem direção nem estrutura.
- O raio de desfoque deve ser grande em relação à tela, cerca de 10 a 20 por cento do lado mais curto, ou as formas continuam a ler-se como manchas.
- Três a quatro cores próximas no círculo cromático desfocam-se de forma limpa; as cores opostas ficam cinzentas onde se sobrepõem.
- A cor desfocada e lisa tem banding com facilidade, por isso uma camada de grão fino deve ir por cima antes de exportar.

Um **gradiente desfocado** é cor sem arestas: algumas formas suaves sobre um fundo, desfocadas até restar apenas luz a deslizar de um matiz para o seguinte. Parece uma fotografia tirada através de vidro fosco, ou uma lente fora de foco numa cidade iluminada. Essa suavidade é o motivo pelo qual serve aplicações de bem-estar, música, cosmética, tecnologia calma e fundos de ecrã. O método é simples: primeiro as formas, depois muito desfoque, depois grão. Os pormenores abaixo são a diferença entre sonhador e esborratado.

## Gradientes desfocados versus gradientes aurora e mesh

Estes três confundem-se porque todos parecem suaves. Vêm de ideias diferentes, e escolher o certo muda o briefing.

| Estilo | Como se vê | Feito a partir de |
| --- | --- | --- |
| Gradiente desfocado | Cor difusa, sem direção, como soft focus | Formas sobre um fundo, muito desfocadas |
| [Gradiente aurora](https://gradiently.design/pt-pt/guide/aurora-gradients) | Fitas ou cortinas de luz num céu escuro | Riscos esticados com um fluxo claro |
| [Gradiente mesh](https://gradiently.design/pt-pt/guide/mesh-gradients) | Campos de cor suaves unidos numa grelha | Pontos de cor misturados numa malha |
| Gradiente linear | Uma rampa reta de uma cor para outra | Paragens ao longo de uma linha |

Um gradiente desfocado não tem estrutura a seguir. Se vês uma direção ou uma forma, é outra coisa.

## Como fazer um gradiente desfocado

1. **Escolhe um fundo** Um branco sujo pálido para ficar arejado, um tinta profunda para ficar luminoso. O fundo preenche todos os vazios que as formas deixam.
2. **Escolhe três ou quatro cores vizinhas** Cores próximas no círculo, como rosa, lilás e azul-céu, misturam-se em intermédias limpas. Lê [cores análogas](https://gradiently.design/pt-pt/guide/analogous-colors) para mais combinações.
3. **Desenha formas grandes e sobrepostas** Três a cinco círculos ou ovais, cada um a cobrir de um quarto a metade da tela. Deixa algumas sair pelas bordas.
4. **Desfoca com força** Aplica um desfoque gaussiano de cerca de 10 a 20 por cento do lado mais curto da tela. Numa publicação com 1080 píxeis de largura, são cerca de 110 a 220 píxeis.
5. **Acrescenta grão** Uma camada de ruído fino com 3 a 6 por cento de opacidade esconde o banding e evita que o resultado pareça plástico.
6. **Confirma no tamanho do telemóvel** Encolhe-o. Se alguma forma ainda tiver uma aresta visível, desfoca mais ou faz a forma maior.

## Receitas de cor para gradientes desfocados

Cada amostra aproxima o aspeto final num único gradiente, para o copiares diretamente para CSS ou usares as cores como formas. Gradientes radiais elípticos com posições descentradas chegam surpreendentemente perto de um desfoque real.

- Neblina da manhã: `radial-gradient(ellipse 90% 70% at 25% 30%, #fbcfe8 0%, #e9d5ff 35%, #bfdbfe 70%, #f8fafc 100%)`
- Flor de pêssego: `radial-gradient(ellipse 80% 90% at 70% 60%, #fde68a 0%, #fdba74 30%, #fda4af 60%, #fdf2f8 100%)`
- Névoa de menta: `radial-gradient(ellipse 85% 75% at 35% 65%, #a7f3d0 0%, #99f6e4 30%, #bae6fd 65%, #f0f9ff 100%)`
- Bokeh noturno: `radial-gradient(ellipse 70% 80% at 65% 35%, #a78bfa 0%, #6366f1 30%, #1e1b4b 70%, #0b0a1a 100%)`
- Luzes de clube: `radial-gradient(ellipse 90% 80% at 30% 70%, #fb7185 0%, #c026d3 35%, #3b0764 72%, #12051f 100%)`
- Desfoque de linho: `linear-gradient(160deg, #e7e5e4 0%, #d6d3d1 30%, #fcd9bd 60%, #f5f5f4 100%)`

Três pálidos e três escuros. Os desfoques pálidos parecem arejados e editoriais; os escuros parecem luzes vistas fora de foco à noite.

Escolhe a família pelo que fica por cima. Os desfoques pálidos suportam bem o texto escuro e servem cosmética, papelaria, bem-estar e capas editoriais. Os escuros fazem o texto claro brilhar e servem vida noturna, música e eventos tardios. Um desfoque neutro como o linho funciona como fundo discreto para fotografias de produto, onde a cor nunca deve competir com o objeto. Para mais paletas suaves, vê [gradientes sonhadores](https://gradiently.design/pt-pt/guide/dreamy-gradients).

## Quanto desfoque precisa um gradiente desfocado

A maioria dos gradientes desfocados falha por não ser desfocada o suficiente. Uma forma desfocada em 30 píxeis numa tela de 1080 píxeis continua a ser uma forma com a aresta suave, que se lê como uma mancha. O visual exige que o desfoque seja grande o bastante para não se perceber onde acaba uma forma.

| Tela | Tamanho | Desfoque inicial |
| --- | --- | --- |
| Publicação de Instagram | 1080×1350 | 110 a 220 px |
| Story ou fundo de ecrã do telemóvel | 1080×1920 | 110 a 220 px |
| Destaque de site | 1920×1080 | 110 a 220 px |
| Miniatura do YouTube | 1280×720 | 70 a 145 px |
| Cartaz A4 a 300 dpi | 2480×3508 | 250 a 500 px |

Pontos de partida a 10 a 20 por cento do lado mais curto. As formas maiores precisam de menos desfoque; as menores, de mais.

## Um gradiente desfocado em CSS

Na web tens dois caminhos. Gradientes radiais em camadas que se esbatem para transparente são baratos e renderizam de imediato. Elementos realmente desfocados parecem mais suaves e podem mover-se, mas custam mais a desenhar. Para um fundo estático, as camadas costumam bastar.

```css
/* Route 1: layered radial gradients, no filter */
.blurry {
  background-color: #f8fafc;
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 25%, #fbcfe8 0%, transparent 70%),
    radial-gradient(ellipse 55% 60% at 80% 30%, #e9d5ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 85%, #bfdbfe 0%, transparent 70%);
}

/* Route 2: real shapes, blurred */
.blurry-live {
  position: relative;
  overflow: hidden;
  background: #f8fafc;
}
.blurry-live .blob {
  position: absolute;
  width: 50vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.8;
}
.blurry-live .blob:nth-child(1) { background: #fbcfe8; left: -10vmax; top: -10vmax; }
.blurry-live .blob:nth-child(2) { background: #e9d5ff; right: -12vmax; top: 0; }
.blurry-live .blob:nth-child(3) { background: #bfdbfe; left: 20%; bottom: -20vmax; }
```

O caminho 1 é uma neblina de manhã suave e estática. O caminho 2 usa três círculos desfocados que podes mover devagar com transform.

Se precisas de um painel fosco sobre um fundo desfocado e não do próprio fundo, isso é `backdrop-filter`, tratado em [filtro de fundo CSS](https://gradiently.design/pt-pt/guide/css-blur-background).

## Porque é que os gradientes desfocados parecem baratos, e a solução

### Esborratado

- Formas ainda visíveis como manchas suaves
- Cores complementares que ficam cinzentas na sobreposição
- Composição uniforme e centrada
- Perfeitamente liso, com banding nos esbatidos
- Palavras postas sobre a mancha mais saturada

### Sonhador

- Desfoque tão largo que nenhuma aresta sobrevive
- Matizes vizinhos que se misturam em intermédios limpos
- Uma massa de cor dominante, descentrada
- Grão fino sobre tudo
- Palavras na zona mais pálida ou mais profunda

O banding é o que apanha toda a gente, porque um desfoque cria esbatidos longos e suaves por muitos píxeis. Um pouco de grão resolve; [banding em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) explica porquê. E se duas das tuas cores se encontram em cinzento, troca uma por uma vizinha, como descrito em [gradientes lamacentos](https://gradiently.design/pt-pt/guide/muddy-gradients).

Um story vertical com as palavras Inspira sobre um fundo desfocado, suave e pálido em rosa e lilás

Um story a 1080×1920 para uma aplicação de meditação. Cor suave, palavras curtas, nada com aresta.

Os Marks da Gradiently incluem materiais suaves e difusos com grão incorporado, e mantêm calma a zona atrás das tuas palavras, por isso um visual desfocado nunca engole o título. Podes desenhar de graça com qualquer Mark por reservar no Studio.

## FAQ

### Como faço um gradiente desfocado?

Põe três a cinco formas grandes em cores vizinhas sobre um fundo liso, aplica um desfoque gaussiano forte de cerca de 10 a 20 por cento do lado mais curto da tela e acrescenta uma camada leve de grão.

### Qual é a diferença entre um gradiente desfocado e um gradiente aurora?

Um gradiente aurora tem fitas de luz com um fluxo claro, normalmente num céu escuro. Um gradiente desfocado é cor difusa sem direção nem estrutura visível.

### Posso fazer um gradiente desfocado só com CSS?

Sim. Sobrepõe vários gradientes radiais que se esbatem para transparente, ou desfoca círculos posicionados de forma absoluta com `filter: blur()`.

### Porque é que o meu gradiente desfocado tem banding?

Esbatidos longos e suaves têm poucos degraus de cor distintos, por isso mostram riscas. Acrescenta grão fino e exporta em PNG em vez de JPEG comprimido.