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

[Canonical HTML page](https://gradiently.design/pt-pt/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 viste este ano. Eis como funcionam, como construir 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, por isso leem-se como luz, água ou tinta e não como geometria.
- O CSS não tem um tipo de gradiente de malha, mas sobrepor gradientes radiais suaves sobre uma cor de base escura ou clara dá um resultado convincente.
- As duas falhas mais comuns são o turvo, quando cores opostas se encontram e ficam cinzentas, e as faixas, quando misturas subtis se partem em riscas.
- Três a cinco cores de uma família próxima, uma cor de base e um pouco de grão chegam 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 a misturar-se com os vizinhos em todas as direções ao mesmo tempo. Um gradiente linear avança ao longo de uma linha e um gradiente radial espalha-se a partir de um centro; uma malha não tem um caminho único, por isso a cor acumula-se, desliza e sobrepõe-se como luz através da água. É por isso que os gradientes de malha parecem orgânicos, e é por isso que se tornaram o visual por omissão de secções de destaque, fundos de ecrã e capas de álbuns.

Este guia explica como funciona uma malha, como fazer uma em CSS e em ferramentas de design e como evitar as manchas cinzentas e as riscas que fazem tantas parecerem baratas. Para as outras formas, vê [tipos de gradientes](https://gradiently.design/pt-pt/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 grelha. Cada ponto da grelha tem uma cor, e o programa mistura suavemente os pontos vizinhos, dobrando a grelha para conduzir a cor. Os gradientes de forma livre dispensam a grelha e deixam-te colocar pontos de cor em qualquer sítio. Os gradientes de malha na web e nas redes sociais seguem normalmente um terceiro caminho: manchas suaves de cor pousadas sobre uma base e misturadas entre si.

Os três partilham uma ideia. A cor de cada píxel é uma mistura dos pontos de cor próximos, pesada pela distância a que estão. Move um ponto e só a sua vizinhança muda, e é isso que permite a uma malha parecer feita à mão e não calculada.

- Base noturna: #0b1026
- Poça violeta: #7c3aed
- Poça céu: #0ea5e9
- Poça turquesa: #14b8a6
- Acento rosa: #f472b6

Uma receita de malha: uma cor de base e quatro pontos de cor. Violeta, céu e turquesa ficam lado a lado no círculo cromático, por isso as sobreposições mantêm-se limpas; o rosa é o único acento.

## Porque é 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 desenhado e geométrico
- Fácil de reconhecer como predefinição

### Malha

- Vários pontos de cor, sem direção única
- O olho vagueia e descansa
- Parece luz, água ou tinta
- Cada disposição é ligeiramente diferente

Essa qualidade errante também é o perigo. Sem estrutura, uma malha pode parecer um borrão ao acaso. As boas têm composição: uma zona clara onde o olho pousa primeiro, uma zona mais escura que lhe dá peso e uma zona calma onde as palavras podem ficar.

## Como fazer um gradiente de malha em CSS

1. **Define uma cor de base** Escolhe um fundo escuro ou claro. Aparece onde quer que as poças de cor se desvaneçam, por isso decide o ambiente geral.
2. **Coloca três a cinco poças de cor** Cada poça é um `radial-gradient` centrado numa posição com `at x% y%`, a desvanecer para `transparent`. Põe-nas perto dos cantos e das margens em vez de ao meio.
3. **Deixa-as sobrepor-se** Desvanece cada poça entre 45% e 60% do caminho para que as vizinhas se encontrem. É nas sobreposições que a malha ganha riqueza.
4. **Deixa uma zona calma** Mantém uma área quase só com a cor de base, normalmente onde vai ficar o título. Vê [texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient).
5. **Acrescenta grão** Uma camada leve de ruído esconde as riscas e acrescenta profundidade. [Gradientes com grão](https://gradiently.design/pt-pt/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 malha em CSS. A primeira camada da lista pinta por cima, por isso põe a tua cor mais forte em primeiro lugar.

Como as poças estão em percentagens, a malha ajusta-se à sua caixa. Em formas muito diferentes, como uma story alta e um banner largo, ajusta as posições `at` para que a zona clara continue a cair onde queres. A mesma paleta pode ser animada lentamente movendo essas posições; [fundos em gradiente animado](https://gradiently.design/pt-pt/guide/animated-gradient-background) explica como o fazer sem prejudicar o desempenho.

## Fazer um gradiente de malha em ferramentas de design

Nas ferramentas com um verdadeiro gradiente de malha ou de forma livre, coloca os pontos de cor diretamente e arrasta-os até a composição funcionar. Nas que não o têm, o método do desfoque funciona em todo o lado: desenha três a cinco formas suaves nas tuas cores sobre um retângulo de base, desfoca-as muito, muitas vezes em um quarto da largura da tela ou mais, e deixa-as sobrepor-se. Depois acrescenta uma camada de grão por cima e exporta no tamanho final em vez de ampliar.

Uma publicação vertical cujo título fica sobre uma zona clara e agitada de um gradiente de malha

Palavras pousadas diretamente sobre uma parte agitada da malha lutam com a cor.

A mesma publicação vertical com uma zona mais calma e escura da malha por trás do título

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

## Erros nos gradientes de malha e como os corrigir

| Problema | Porque acontece | Solução |
| --- | --- | --- |
| Manchas cinzentas ou castanhas | Cores opostas, como laranja e azul, encontram-se e anulam-se | Mantém as poças vizinhas próximas no tom, ou separa as opostas com uma terceira cor. Vê [gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients) |
| Riscas visíveis | Misturas grandes e subtis avançam aos saltos entre os tons que um ecrã consegue mostrar | Acrescenta grão e evita compressão JPEG forte. Vê [faixas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding) |
| Uma mancha ao meio | Poças centradas na tela parecem um alvo | Empurra as poças para as margens e os cantos |
| Ruído arco-íris | Demasiadas cores sem relação | Três a cinco cores de uma família mais um acento |
| Sem lugar para palavras | Cor espalhada por igual em toda a superfície | Planeia uma zona calma antes de colocares as poças |

Quase todos os gradientes de malha fracos têm um destes cinco problemas.

Uma malha só é tão boa como a sua paleta. Se não tens a certeza de que cores se misturam bem, começa por uma família de [cores análogas](https://gradiently.design/pt-pt/guide/analogous-colors) e acrescenta um acento contrastante numa única poça.

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

Se preferires descrever uma malha em vez de a construir, a Forge cria Marks novos a partir de uma frase ou controlo a controlo, com até oito cores e três materiais sobrepostos.

## FAQ

### O que é um gradiente de malha?

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

### É possível fazer um gradiente de malha em CSS?

Sim, por aproximação. Sobrepõe três a cinco camadas de `radial-gradient`, cada uma a desvanecer para transparente, sobre uma cor de fundo de base.

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

Três a cinco cores mais uma base costuma funcionar melhor. Mais do que isso tende a parecer ruído arco-íris em vez de um campo composto.

### Porque é que o meu gradiente de malha parece turvo?

Há cores opostas a encontrar-se e a misturar-se em direção ao cinzento. Mantém as cores vizinhas próximas no tom, ou põe 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 grelha de pontos que podes dobrar. Um gradiente de forma livre deixa-te colocar pontos de cor em qualquer sítio, sem grelha. Ambos misturam em duas dimensões.