# Gradiente de malha em CSS: como o criar com camadas radiais

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

Não há mesh-gradient() em CSS. Eis o método de camadas que imita um de forma convincente, o desfocado e o grão que o acabam e quando uma imagem ou um shader é a melhor opção.

## The short version

- O CSS não tem uma função nativa de gradiente de malha, por isso um gradiente de malha em CSS constrói-se empilhando vários gradientes radiais sobre uma cor de base lisa.
- Cada camada é uma poça de cor na sua própria posição que esbate para transparente, e as sobreposições criam a mistura suave e multidirecional de uma malha.
- Um filtro de desfocado num pseudoelemento suaviza ainda mais as poças, e uma ténue camada de ruído esconde as faixas.
- Os gradientes sobrepostos estáticos são baratos de desenhar, mas os desfocados grandes e as camadas animadas repintam muitas vezes e devem ser lentos, pequenos ou opcionais.
- Quando um design precisa de muitos pontos de cor, formas deformadas ou movimento suave em ecrã inteiro, uma imagem exportada, um vídeo ou um shader WebGL costuma ser a melhor ferramenta.

Um **gradiente de malha em CSS** é um fundo onde a cor se mistura em várias direções ao mesmo tempo, como se poças de pigmento se tivessem embebido umas nas outras. O CSS não tem uma função de malha, e os gradientes de malha outrora esboçados para o SVG nunca chegaram aos navegadores, por isso a versão web é uma imitação: três a cinco camadas de `radial-gradient()` empilhadas sobre uma cor lisa, cada uma a esbater para `transparent`. Bem feita, é suficientemente próxima para ninguém notar, pesa algumas centenas de bytes e mantém-se nítida em qualquer tamanho.

Se queres primeiro a teoria de design, o que é uma malha e porque parece orgânica, lê os [gradientes de malha](https://gradiently.design/pt-pt/guide/mesh-gradients). Este guia trata de construir um em código.

## Como funciona o método das camadas

Cada camada é um ponto de cor. A sua posição é o valor `at`, o seu alcance é a distância do esbatido e a sua força é o alfa da cor. Como o primeiro gradiente em `background-image` é pintado por cima, a ordem importa aqui menos do que poderias pensar: todas as camadas são em grande parte transparentes, por isso misturam-se onde se sobrepõem. O `background-color` de base aparece onde nenhuma poça chega.

- Poça 1: violeta, topo esquerdo: `radial-gradient(circle at 15% 20%, #7c3aed, #0b1026 55%)`
- Poça 2: rosa, topo direito: `radial-gradient(circle at 85% 25%, #ec4899, #0b1026 50%)`
- Poça 3: ciano, em baixo: `radial-gradient(ellipse at 60% 90%, #06b6d4, #0b1026 60%)`
- Poça 4: destaque âmbar: `radial-gradient(circle at 25% 80%, #f59e0b, #0b1026 45%)`

Os quatro pontos de cor de uma malha, cada um mostrado sozinho sobre a base azul-marinho. Empilhados, misturam-se num só campo.

```css
.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at 15% 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(circle at 85% 25%, rgb(236 72 153 / 0.75), transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%),
    radial-gradient(circle at 25% 80%, rgb(245 158 11 / 0.55), transparent 45%);
}
```

A pilha completa. Muda um valor `at` e toda a composição se reequilibra.

## Passo a passo: cria o teu próprio gradiente de malha em CSS

1. **Escolhe um fundo** Escolhe a cor lisa que aparece entre as poças. Os fundos escuros fazem as poças brilhar; os fundos claros fazem-nas parecer aguarela. O fundo é também a tua reserva se os gradientes falharem.
2. **Escolhe três a cinco cores relacionadas** Os matizes vizinhos misturam-se de forma limpa. Os opostos, como azul e laranja, encontram-se numa mancha cinzenta. Os [gradientes lamacentos](https://gradiently.design/pt-pt/guide/muddy-gradients) explicam porquê e como evitar.
3. **Coloca as poças fora do centro** Empurra os pontos para os cantos e as arestas e deixa pelo menos um parcialmente fora da caixa, como `at 110% 0%`. As poças centradas parecem um alvo.
4. **Varia o alcance e a força** Dá a uma cor o maior esbatido e o alfa mais alto para que lidere. Mantém o destaque pequeno e mais fraco. Poças iguais parecem mecânicas.
5. **Mistura num espaço de cor melhor** Acrescenta `in oklab` a cada camada, como em `radial-gradient(in oklab circle at 15% 20%, ...)`, onde for suportado. As sobreposições ficam mais brilhantes do que em sRGB.
6. **Acaba com grão** Os esbatidos grandes e suaves fazem faixas em muitos ecrãs. Uma ténue sobreposição de ruído resolve isso e dá uma sensação de impressão; vê abaixo.

## Misturas mais suaves com desfocado

Os esbatidos radiais são suaves mas as suas formas são obviamente redondas. Um desfocado suaviza os círculos em algo mais orgânico. Põe as camadas num pseudoelemento, desfoca-o e aumenta-lhe o tamanho com um `inset` negativo para que as arestas desfocadas não se esbatam na página. O `isolation: isolate` mantém o `z-index` negativo dentro do componente.

```css
.mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b1026;
}

.mesh::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 25%, #7c3aed, transparent 40%),
    radial-gradient(circle at 80% 30%, #ec4899, transparent 35%),
    radial-gradient(circle at 55% 85%, #06b6d4, transparent 40%);
  filter: blur(48px);
}
```

Uma malha desfocada num pseudoelemento. O texto dentro de `.mesh` fica nítido porque só o pseudoelemento é desfocado.

> **O desfocado é a parte cara** Um desfocado estático é pintado uma vez e costuma estar bem. Uma camada desfocada que se move ou muda de tamanho é repintada a cada fotograma, e os raios de desfocado grandes em ecrã inteiro custam mais. Vê o [desempenho dos gradientes CSS](https://gradiently.design/pt-pt/guide/css-gradient-performance).

## Acrescentar grão a um gradiente de malha em CSS

O grão faz duas coisas. Quebra os degraus visíveis que aparecem em esbatidos largos e de baixo contraste e dá à superfície a qualidade tátil, de película, que faz os gradientes parecerem pensados e não predefinidos. Em CSS, a fonte habitual é um filtro SVG `feTurbulence` usado como uma pequena imagem de fundo, sobreposta com pouca opacidade. A técnica completa está na [textura de ruído em CSS](https://gradiently.design/pt-pt/guide/css-noise-texture), e o raciocínio de design nos [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients).

### Sem grão

- Anéis visíveis nas zonas escuras em muitos ecrãs
- A superfície lê-se como uma cor de ecrã lisa
- Parece uma predefinição de modelo

### Com grão ténue

- Os degraus quebram-se e desaparecem
- A superfície lê-se como papel, película ou impressão
- Parece deliberado e acabado

## Animar um gradiente de malha

As posições dos gradientes não são animáveis por si, mas as propriedades personalizadas registadas são. Declara cada coordenada que se move com `@property`, usa-a dentro do gradiente e anima a propriedade. Mantém o movimento lento e desliga-o para quem pede [movimento reduzido](https://gradiently.design/pt-pt/guide/reduced-motion).

```css
@property --x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 15%;
}

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at var(--x1) 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%);
  animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
  to { --x1: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh { animation: none; }
}
```

Uma poça a derivar pelo topo. Acrescenta uma segunda propriedade por cada coordenada que queiras mover.

Cada fotograma desta animação repinta o fundo inteiro. Num cartão pequeno isso é trivial; num herói de ecrã inteiro vale a pena medir. O guia sobre o [gradiente animado](https://gradiently.design/pt-pt/guide/css-animated-gradient) trata de alternativas mais baratas, como mover uma camada sobredimensionada com `transform`.

## Quando usar uma imagem ou WebGL

| Abordagem | Melhor para | Atenção a |
| --- | --- | --- |
| Gradientes CSS sobrepostos | Fundos estáticos, cartões, heróis com três a cinco cores | Poças de aspeto redondo, faixas sem grão |
| CSS com desfocado | Campos estáticos mais suaves e orgânicos | Custo de repintura se animado ou redimensionado com frequência |
| Imagem exportada (AVIF ou WebP) | Malhas complexas com muitos pontos ou formas pictóricas | Peso do ficheiro e um recorte fixo por formato |
| Ciclo de vídeo | Movimento rico num herói | Tamanho do ficheiro, regras de reprodução automática, movimento reduzido |
| Shader WebGL | Movimento fluido e interativo em ecrã inteiro | Complexidade do código, uso de bateria, alternativas |

Escolhe a ferramenta mais leve que ainda fique bem.

Os shaders são tratados nos [gradientes WebGL](https://gradiently.design/pt-pt/guide/shader-gradients). Um meio-termo é desenhar o fundo uma vez como um material vivo e exportá-lo: os Marks da Gradiently são materiais tipo malha com cor, grão, luz e movimento, e um design feito com um exporta-se como PNG, JPEG ou um ciclo de vídeo contínuo de 5 a 30 segundos.

Um Mark: poças de cor, material e grão desenhados ao vivo em vez de aproximados com camadas.

## FAQ

### Pode fazer-se um gradiente de malha só com CSS?

Não de forma nativa, mas empilhar três a cinco gradientes radiais que esbatem para transparente sobre uma cor de base dá uma malha convincente. Um desfocado e uma camada de ruído acabam-na.

### De quantos gradientes radiais precisa uma malha em CSS?

Três a cinco costuma bastar. Menos parece um simples brilho; mais tende a ficar lamacento e mais difícil de equilibrar.

### Porque é que o meu gradiente de malha em CSS parece lamacento?

Os matizes opostos que se encontram em sRGB misturam-se por cinzento. Usa cores vizinhas, reduz a sobreposição ou acrescenta `in oklab` a cada camada.

### Um gradiente de malha em CSS é mau para o desempenho?

Um estático é barato. Os custos sobem com filtros de desfocado grandes e com animação, porque o fundo repinta a cada fotograma.

### O SVG suporta gradientes de malha?

Os gradientes de malha foram esboçados para o SVG 2 mas os navegadores nunca os implementaram, por isso na web imitam-se com camadas, usa-se uma imagem ou desenham-se com WebGL.