# Gradientes de malha: o que são e como criar um

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

Os gradientes de malha são os campos de cor suaves e à deriva por trás de metade das páginas de lançamento que você viu neste ano. Veja como funcionam, como montar um à mão e os dois erros que estragam a maioria.

## The short version

- Um gradiente de malha é um gradiente em que vários pontos de cor se misturam entre si em duas dimensões, em vez de ao longo de uma linha ou a partir de um centro.
- Os gradientes de malha parecem orgânicos porque não têm uma direção única, então se leem como luz, água ou tinta, e não como geometria.
- O CSS não tem um tipo de gradiente de malha, mas empilhar gradientes radiais suaves sobre uma cor de base escura ou clara dá um resultado convincente.
- As duas falhas mais comuns são o barro, quando cores opostas se encontram e ficam cinzentas, e o banding, quando misturas sutis se quebram em faixas.
- Três a cinco cores de uma família próxima, uma cor de base e um pouco de grão bastam para a maioria dos gradientes de malha.

Um **gradiente de malha** é um gradiente construído a partir de vários pontos de cor espalhados por uma superfície, cada um se misturando com os vizinhos em todas as direções ao mesmo tempo. Um gradiente linear segue uma linha e um radial se espalha a partir de um centro; uma malha não tem um caminho único, então a cor se acumula, deriva e se sobrepõe como a luz através da água. É por isso que os gradientes de malha parecem orgânicos e se tornaram o visual padrão de seções de destaque, papéis de parede e capas de álbum.

Este guia explica como uma malha funciona, como criar uma em CSS e em ferramentas de design e como evitar as manchas cinzentas e as faixas que fazem tantas delas parecerem baratas. Para as outras formas, veja [tipos de gradientes](https://gradiently.design/pt-br/guide/types-of-gradients).

## O que faz de um gradiente uma malha

Numa verdadeira malha de gradiente, como a do Adobe Illustrator, a superfície é dividida numa grade. Cada ponto da grade guarda uma cor, e o software mistura suavemente entre pontos vizinhos, curvando a grade para conduzir a cor. Os gradientes de forma livre dispensam a grade e deixam você pôr pontos de cor em qualquer lugar. Os gradientes de malha da web e das redes sociais costumam seguir um terceiro caminho: manchas suaves de cor postas sobre uma base e misturadas.

Os três compartilham uma ideia. A cor de cada pixel é uma mistura dos pontos de cor próximos, ponderada pela proximidade. Mova um ponto e só a vizinhança dele muda, o que faz uma malha parecer feita à mão, e não calculada.

- Base noturna: #0b1026
- Poça violeta: #7c3aed
- Poça de céu: #0ea5e9
- Poça verde-azulada: #14b8a6
- Destaque rosa: #f472b6

Uma receita de malha: uma cor de base e quatro pontos de cor. Violeta, céu e verde-azulado ficam lado a lado no círculo cromático, então as sobreposições continuam limpas; o rosa é o único destaque.

## Por que os gradientes de malha parecem orgânicos

### Linear ou radial

- Uma direção ou um centro
- O olho segue a linha ou o alvo
- Parece projetado e geométrico
- Fácil de reconhecer como um preset

### Malha

- Vários pontos de cor, sem direção única
- O olho passeia e descansa
- Parece luz, água ou tinta
- Cada arranjo é um pouco diferente

Essa qualidade de passeio também é o perigo. Sem estrutura, uma malha pode parecer um borrão aleatório. As boas têm composição: uma área clara onde o olho pousa primeiro, uma área mais escura que dá peso e uma área calma onde as palavras podem ficar.

## Como criar um gradiente de malha em CSS

1. **Defina uma cor de base** Escolha um fundo escuro ou claro. Ele aparece onde as poças de cor se desfazem, então decide o clima geral.
2. **Posicione de três a cinco poças de cor** Cada poça é um `radial-gradient` centrado numa posição com `at x% y%`, esmaecendo até `transparent`. Coloque-as perto de cantos e bordas, e não no meio.
3. **Deixe-as se sobrepor** Esmaeça cada poça entre 45% e 60% do caminho para que as vizinhas se encontrem. As sobreposições são onde a malha ganha riqueza.
4. **Deixe uma zona calma** Mantenha uma área quase só na cor de base, geralmente onde vai o seu título. Veja [texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient).
5. **Acrescente grão** Uma camada leve de ruído esconde as faixas e dá profundidade. [Gradientes granulados](https://gradiently.design/pt-br/guide/grainy-gradients) mostra o código.

```css
.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 12% 18%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 88% 12%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 80% 88%, #14b8a6 0px, transparent 55%),
    radial-gradient(at 20% 92%, #f472b6 0px, transparent 45%);
}
```

A paleta acima como uma malha CSS. A primeira camada listada é pintada por cima, então ponha a sua cor mais forte primeiro.

Como as poças são porcentagens, a malha se redimensiona com a sua caixa. Em formatos muito diferentes, como um story vertical e um banner largo, ajuste as posições de `at` para que a área clara ainda caia onde você quer. A mesma paleta pode ser animada devagar movendo essas posições; [fundos de gradiente animados](https://gradiently.design/pt-br/guide/animated-gradient-background) mostra como fazer isso sem prejudicar o desempenho.

## Criando um gradiente de malha em ferramentas de design

Em ferramentas com uma malha de verdade ou um gradiente de forma livre, posicione os pontos de cor diretamente e arraste até a composição funcionar. Nas ferramentas sem isso, o método do desfoque funciona em todo lugar: desenhe de três a cinco formas suaves nas suas cores sobre um retângulo de base, desfoque-as bastante, muitas vezes um quarto da largura da tela ou mais, e deixe-as se sobrepor. Depois acrescente uma camada de grão por cima e exporte no tamanho final, em vez de ampliar.

Um post vertical cujo título fica sobre uma área clara e agitada de um gradiente de malha

Palavras postas direto sobre uma parte agitada da malha brigam com a cor.

O mesmo post vertical com uma área mais calma e mais escura da malha atrás do título

A mesma malha com uma zona calma atrás das palavras se lê num relance.

## Erros em gradientes de malha e como corrigi-los

| Problema | Por que acontece | Correção |
| --- | --- | --- |
| Manchas cinzentas ou marrons | Cores opostas, como laranja e azul, se encontram e se anulam | Mantenha poças vizinhas próximas em matiz ou separe opostos com uma terceira cor. Veja [gradientes barrentos](https://gradiently.design/pt-br/guide/muddy-gradients) |
| Faixas visíveis | Misturas grandes e sutis dão saltos entre os tons que uma tela consegue mostrar | Acrescente grão e evite compressão JPEG pesada. Veja [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) |
| Uma mancha no meio | Poças centradas na tela parecem um alvo | Empurre as poças para as bordas e os cantos |
| Ruído de arco-íris | Cores demais e sem relação | Três a cinco cores de uma família, mais um destaque |
| Sem lugar para as palavras | Cor espalhada por igual pela superfície inteira | Planeje uma zona calma antes de posicionar as poças |

Quase todo gradiente de malha fraco tem um destes cinco problemas.

Uma malha é tão boa quanto a sua paleta. Se você não sabe quais cores vão se misturar de forma limpa, comece com uma família de [cores análogas](https://gradiently.design/pt-br/guide/analogous-colors) e acrescente um destaque contrastante numa única poça.

Um Mark é um gradiente de malha bem acabado: poças equilibradas, material, grão e luz, renderizados ao vivo para cada tamanho em que você cria.

Se você prefere descrever uma malha em vez de construí-la, a Forge cria novos Marks a partir de uma frase ou controle a controle, com até oito cores e três materiais empilhados.

## FAQ

### O que é um gradiente de malha?

Um gradiente de malha mistura vários pontos de cor pela superfície em duas dimensões, de modo que a cor se acumula e se sobrepõe de forma orgânica, em vez de seguir uma linha ou um centro.

### Dá para fazer um gradiente de malha em CSS?

Sim, por aproximação. Empilhe de três a cinco camadas de `radial-gradient`, cada uma esmaecendo até transparente, sobre uma cor de fundo de base.

### Quantas cores um gradiente de malha deve ter?

De três a cinco cores mais uma base costuma funcionar melhor. Mais do que isso tende a parecer ruído de arco-íris, e não um campo composto.

### Por que o meu gradiente de malha parece barrento?

Cores opostas estão se encontrando e se misturando em direção ao cinza. Mantenha as cores vizinhas próximas em matiz ou ponha uma cor de ligação entre as opostas.

### Qual é a diferença entre um gradiente de malha e um gradiente de forma livre?

Uma malha de gradiente clássica guarda as cores numa grade de pontos que você pode curvar. Um gradiente de forma livre deixa você pôr pontos de cor em qualquer lugar, sem grade. Os dois se misturam em duas dimensões.