# Degradê desfocado: cor em foco suave com cara de moderno

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

Degradês desfocados parecem cor vista através de vidro jateado ou de uma lente fora de foco. São calmos, modernos e fáceis de fazer mal. Aqui está o método, com os números.

## The short version

- Um degradê desfocado é feito colocando algumas formas suaves de cor sobre um fundo e desfocando até não sobrar nenhuma borda.
- Degradês desfocados são diferentes de degradês aurora: a aurora são faixas de luz num céu escuro, enquanto um degradê desfocado é cor difusa sem direção nem estrutura.
- O raio do desfoque deve ser grande em relação à tela, cerca de 10 a 20 por cento do lado menor, senão as formas ainda parecem manchas.
- Três ou quatro cores próximas no círculo cromático desfocam de forma limpa; cores opostas ficam cinzentas onde se sobrepõem.
- Cor desfocada e lisa cria banding com facilidade, então uma camada fina de grão deve ir por cima antes de exportar.

Um **degradê desfocado** é cor sem bordas: algumas formas suaves sobre um fundo, desfocadas até sobrar só luz passando de um tom para o outro. Parece uma foto tirada através de vidro jateado, ou uma lente fora de foco numa cidade iluminada. Essa suavidade é o motivo de ele combinar com apps de bem-estar, música, skincare, tecnologia tranquila e papéis de parede. O método é simples: formas primeiro, depois muito desfoque, depois grão. Os detalhes abaixo fazem a diferença entre sonhador e borrado.

## Degradê desfocado, aurora e mesh

Esses três se confundem porque todos parecem suaves. Eles vêm de ideias diferentes, e escolher o certo muda o briefing.

| Estilo | Como fica | Feito de |
| --- | --- | --- |
| Degradê desfocado | Cor difusa, sem direção, como foco suave | Formas sobre um fundo, muito desfocadas |
| [Degradê aurora](https://gradiently.design/pt-br/guide/aurora-gradients) | Faixas ou cortinas de luz num céu escuro | Riscos esticados com um fluxo claro |
| [Degradê mesh](https://gradiently.design/pt-br/guide/mesh-gradients) | Campos de cor lisos unidos numa grade | Pontos de cor misturados numa malha |
| Degradê linear | Uma rampa reta de uma cor para outra | Paradas ao longo de uma linha |

Um degradê desfocado não tem estrutura a seguir. Se dá para ver uma direção ou uma forma, é outra coisa.

## Como fazer um degradê desfocado

1. **Escolha um fundo** Um off-white pálido para algo arejado, uma tinta profunda para algo que brilha. O fundo preenche cada espaço que as formas deixam.
2. **Escolha três ou quatro cores vizinhas** Cores próximas no círculo, como rosa, lilás e azul-céu, se misturam em tons intermediários limpos. Leia [cores análogas](https://gradiently.design/pt-br/guide/analogous-colors) para mais combinações.
3. **Desenhe formas grandes e sobrepostas** De três a cinco círculos ou ovais, cada um cobrindo de um quarto a metade da tela. Deixe alguns passarem das bordas.
4. **Desfoque com força** Aplique um desfoque gaussiano de cerca de 10 a 20 por cento do lado menor da tela. Num post de 1080 pixels de largura, isso dá de 110 a 220 pixels.
5. **Adicione grão** Uma camada fina de ruído com 3 a 6 por cento de opacidade esconde o banding e evita que o resultado pareça plástico.
6. **Confira no tamanho do celular** Reduza a imagem. Se alguma forma ainda tiver borda visível, desfoque mais ou aumente a forma.

## Receitas de cor para degradê desfocado

Cada amostra aproxima o visual final num único degradê, então você pode copiar direto para o CSS ou usar as cores como suas formas. Degradês radiais elípticos em posições fora do centro chegam surpreendentemente perto de um desfoque de verdade.

- Névoa 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%)`
- Neblina 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 balada: `radial-gradient(ellipse 90% 80% at 30% 70%, #fb7185 0%, #c026d3 35%, #3b0764 72%, #12051f 100%)`
- Linho desfocado: `linear-gradient(160deg, #e7e5e4 0%, #d6d3d1 30%, #fcd9bd 60%, #f5f5f4 100%)`

Três claros e três escuros. Desfoques claros parecem arejados e editoriais; desfoques escuros parecem luzes fora de foco à noite.

Escolha a família pelo que vai por cima. Desfoques claros sustentam bem letras escuras e combinam com skincare, papelaria, bem-estar e capas editoriais. Desfoques escuros fazem letras claras brilharem e combinam com vida noturna, música e eventos tarde da noite. Um desfoque neutro como o linho funciona como fundo discreto para fotos de produto, em que a cor nunca deve competir com o objeto. Para mais paletas suaves, veja [degradês sonhadores](https://gradiently.design/pt-br/guide/dreamy-gradients).

## Quanto desfoque um degradê desfocado precisa

A maioria dos degradês desfocados falha por não estar desfocada o bastante. Uma forma desfocada em 30 pixels numa tela de 1080 pixels ainda é uma forma com borda suave, que parece uma mancha. O visual pede um desfoque grande o suficiente para não dar para saber onde uma forma termina.

| Tela | Tamanho | Desfoque inicial |
| --- | --- | --- |
| Post do Instagram | 1080×1350 | 110 a 220 px |
| Story ou papel de parede de celular | 1080×1920 | 110 a 220 px |
| Hero de site | 1920×1080 | 110 a 220 px |
| Miniatura do YouTube | 1280×720 | 70 a 145 px |
| Pôster A4 a 300 dpi | 2480×3508 | 250 a 500 px |

Pontos de partida em 10 a 20 por cento do lado menor. Formas maiores precisam de menos desfoque; menores precisam de mais.

## Um degradê desfocado em CSS

Na web você tem dois caminhos. Degradês radiais em camadas que desaparecem no transparente são leves e renderizam na hora. Elementos realmente desfocados parecem mais suaves e podem se mover, mas custam mais para 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 névoa da manhã suave e estática. O caminho 2 usa três círculos desfocados que você pode mover devagar com transform.

Se você precisa de um painel fosco sobre um fundo desfocado, e não do fundo em si, isso é `backdrop-filter`, explicado em [backdrop filter no CSS](https://gradiently.design/pt-br/guide/css-blur-background).

## Por que degradês desfocados parecem baratos, e como resolver

### Borrado

- Formas ainda visíveis como manchas suaves
- Cores complementares que ficam cinza na sobreposição
- Composição uniforme e centralizada
- Perfeitamente liso, com banding nas transições
- Palavras sobre a área mais saturada

### Sonhador

- Desfoque tão largo que nenhuma borda sobrevive
- Tons vizinhos que se misturam em intermediários limpos
- Uma massa de cor dominante, fora do centro
- Grão fino sobre tudo
- Palavras na área mais clara ou mais profunda

O banding pega todo mundo, porque um desfoque cria transições longas e suaves por muitos pixels. Um pouco de grão resolve; [banding em degradês](https://gradiently.design/pt-br/guide/gradient-banding) explica por quê. E se duas das suas cores se encontram no cinza, troque uma por uma vizinha, como descrito em [degradês sujos](https://gradiently.design/pt-br/guide/muddy-gradients).

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

Um story em 1080×1920 para um app de meditação. Cor suave, poucas palavras, nada com borda.

Os Marks do Gradiently incluem materiais suaves e difusos com grão embutido, e mantêm calma a área atrás das suas palavras, então um visual desfocado nunca engole o título. Você pode criar com qualquer Mark não reservado de graça no Studio.

## FAQ

### Como faço um degradê desfocado?

Coloque de três a cinco formas grandes em cores vizinhas sobre um fundo liso, aplique um desfoque gaussiano forte de cerca de 10 a 20 por cento do lado menor da tela e adicione uma camada leve de grão.

### Qual a diferença entre um degradê desfocado e um degradê aurora?

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

### Dá para fazer um degradê desfocado só com CSS?

Sim. Sobreponha vários degradês radiais que desaparecem no transparente, ou desfoque círculos com posição absoluta usando `filter: blur()`.

### Por que meu degradê desfocado tem banding?

Transições longas e suaves têm poucos degraus de cor distintos, então mostram listras. Adicione grão fino e exporte em PNG em vez de JPEG comprimido.