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

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

Não existe mesh-gradient() em CSS. Aqui está o método de camadas que imita um de forma convincente, o desfoque e o grão que o acabam e quando uma imagem ou um shader é a melhor escolha.

## The short version

- O CSS não tem uma função nativa de gradiente de malha, então um gradiente de malha em CSS é construído empilhando vários gradientes radiais sobre uma cor de base lisa.
- Cada camada é uma poça de cor em sua própria posição que esmaece para transparente, e as sobreposições criam a mistura suave e multidirecional de uma malha.
- Um filtro de desfoque em um pseudoelemento suaviza mais as poças, e uma camada leve de ruído esconde o banding.
- Gradientes em camadas estáticos são baratos de renderizar, mas desfoques grandes e camadas animadas repintam com frequência e devem ficar lentos, pequenos ou opcionais.
- Quando um design precisa de muitos pontos de cor, formas distorcidas ou movimento suave em tela cheia, uma imagem exportada, um vídeo ou um shader WebGL costuma ser a melhor ferramenta.

Um **gradiente de malha em CSS** é um fundo em que a cor se mistura em várias direções ao mesmo tempo, como se poças de pigmento tivessem se encharcado umas nas outras. O CSS não tem função de malha, e os gradientes de malha que chegaram a ser rascunhados para o SVG nunca saíram nos navegadores, então a versão para a web é uma imitação: de três a cinco camadas de `radial-gradient()` empilhadas sobre uma cor lisa, cada uma esmaecendo para `transparent`. Bem feita, chega perto o bastante para ninguém notar, pesa algumas centenas de bytes e continua nítida em qualquer tamanho.

Se você quer a teoria de design primeiro, o que é uma malha e por que ela parece orgânica, leia [gradientes de malha](https://gradiently.design/pt-br/guide/mesh-gradients). Este guia é sobre construir um em código.

## Como funciona o método das camadas

Cada camada é um ponto de cor. A posição dela é o valor `at`, o alcance é a distância do esmaecimento e a força é o alfa da cor. Como o primeiro gradiente do `background-image` é pintado por cima, a ordem importa menos do que você imagina aqui: cada camada é quase toda transparente, então elas se misturam onde se sobrepõem. O `background-color` de base aparece onde nenhuma poça chega.

- Poça 1: violeta, no alto à esquerda: `radial-gradient(circle at 15% 20%, #7c3aed, #0b1026 55%)`
- Poça 2: rosa, no alto à direita: `radial-gradient(circle at 85% 25%, #ec4899, #0b1026 50%)`
- Poça 3: ciano, embaixo: `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, se misturam em um único 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. Mude um valor de `at` e a composição inteira se reequilibra.

## Passo a passo: crie o seu gradiente de malha em CSS

1. **Escolha um fundo** Escolha a cor lisa que aparece entre as poças. Fundos escuros fazem as poças brilharem; fundos claros as fazem parecer aquarela. O fundo também é sua alternativa se os gradientes falharem.
2. **Escolha de três a cinco cores relacionadas** Matizes vizinhos se misturam de forma limpa. Opostos, como azul e laranja, se encontram em uma mancha cinza. [Gradientes turvos](https://gradiently.design/pt-br/guide/muddy-gradients) explica por quê e como evitar.
3. **Posicione as poças fora do centro** Empurre os pontos para os cantos e as bordas e deixe pelo menos um parcialmente fora da caixa, como `at 110% 0%`. Poças centralizadas parecem um alvo.
4. **Varie o alcance e a força** Dê a uma cor o maior esmaecimento e o maior alfa para que ela lidere. Mantenha o destaque pequeno e mais fraco. Poças iguais parecem mecânicas.
5. **Misture em um espaço de cor melhor** Acrescente `in oklab` a cada camada, como em `radial-gradient(in oklab circle at 15% 20%, ...)`, onde houver suporte. As sobreposições ficam mais brilhantes que em sRGB.
6. **Termine com grão** Esmaecimentos grandes e suaves formam faixas em muitas telas. Uma camada leve de ruído resolve e dá uma sensação de impresso; veja abaixo.

## Misturas mais suaves com desfoque

Os esmaecimentos radiais são suaves, mas as formas deles são obviamente redondas. Um desfoque suaviza os círculos em algo mais orgânico. Coloque as camadas em um pseudoelemento, desfoque-o e superdimensione-o com um `inset` negativo para que as bordas desfocadas não esmaeçam 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 em um pseudoelemento. O texto dentro de `.mesh` continua nítido porque só o pseudoelemento é desfocado.

> **O desfoque é a parte cara** Um desfoque estático é pintado uma vez e em geral vai bem. Uma camada desfocada que se move ou muda de tamanho é repintada a cada quadro, e raios de desfoque grandes em tela cheia custam mais. Veja [desempenho de gradientes CSS](https://gradiently.design/pt-br/guide/css-gradient-performance).

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

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

### Sem grão

- Anéis visíveis nas áreas escuras em muitas telas
- A superfície se lê como uma cor lisa de tela
- Parece o padrão de um modelo pronto

### Com grão leve

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

## Animando um gradiente de malha

As posições de um gradiente não são animáveis por si sós, mas as propriedades personalizadas registradas são. Declare cada coordenada móvel com `@property`, use-a dentro do gradiente e anime a propriedade. Mantenha o movimento lento e desligue-o para quem pede [movimento reduzido](https://gradiently.design/pt-br/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 derivando pelo alto. Acrescente uma segunda propriedade para cada coordenada que quiser mover.

Cada quadro dessa animação repinta o fundo inteiro. Em um card pequeno isso é trivial; em um hero de tela cheia vale medir. O guia de [gradiente animado](https://gradiently.design/pt-br/guide/css-animated-gradient) trata de alternativas mais baratas, como mover uma camada superdimensionada com `transform`.

## Quando usar uma imagem ou WebGL

| Abordagem | Melhor para | Cuidado com |
| --- | --- | --- |
| Gradientes CSS em camadas | Fundos estáticos, cards, heroes com três a cinco cores | Poças de aspecto redondo, banding sem grão |
| CSS com desfoque | 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 arquivo e um recorte fixo por formato |
| Vídeo em loop | Movimento rico em um hero | Tamanho do arquivo, regras de reprodução automática, movimento reduzido |
| Shader WebGL | Movimento fluido, interativo e em tela cheia | Complexidade de código, uso de bateria, alternativas |

Escolha a ferramenta mais leve que ainda tenha a aparência certa.

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

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

## FAQ

### É possível fazer um gradiente de malha só com CSS?

Nativamente não, mas empilhar de três a cinco gradientes radiais que esmaecem para transparente sobre uma cor de base dá uma malha convincente. Um desfoque e uma camada de ruído a completam.

### Quantos gradientes radiais uma malha em CSS precisa?

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

### Por que meu gradiente de malha em CSS fica turvo?

Matizes opostos se encontrando em sRGB se misturam passando pelo cinza. Use cores vizinhas, reduza a sobreposição ou acrescente `in oklab` a cada camada.

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

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

### O SVG aceita gradientes de malha?

Os gradientes de malha foram rascunhados para o SVG 2, mas os navegadores nunca os implementaram, então na web você os imita com camadas, usa uma imagem ou os renderiza com WebGL.