# Desempenho de gradientes CSS: gradientes deixam o site lento?

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

Um gradiente CSS estático é quase de graça. Os custos vêm do que as pessoas fazem com gradientes: desfoques enormes, fundos que repintam ao rolar e animações que nunca param. Veja como distinguir.

## The short version

- Um gradiente CSS estático custa quase nada para carregar, porque é uma linha de texto e não um arquivo a baixar e decodificar.
- Gradientes custam tempo de pintura, que cresce com a área pintada e com o número de camadas, mas um gradiente estático é pintado uma vez e depois reaproveitado.
- Os riscos reais de desempenho são filtros de desfoque grandes, fundos que repintam durante a rolagem e animações de gradiente que repintam a cada quadro.
- Animar transform ou opacity em uma camada de gradiente costuma ser muito mais barato do que animar background-position ou paradas de cor.
- A única resposta confiável para uma página específica é medir, com o destaque de pintura e uma gravação de Performance nas ferramentas de desenvolvedor do navegador.

O bom **desempenho de gradientes CSS** é o caso normal: um gradiente estático não deixa um site lento de nenhum jeito que você perceba. É uma linha de texto, então não há nada a baixar, nada a decodificar e nada a esperar. Gradientes custam um pouco de tempo de pintura, como qualquer outra cor da página. As páginas lentas vêm de alguns padrões específicos construídos sobre gradientes: desfoques grandes, repinturas durante a rolagem e animações que repintam a cada quadro. Este guia mostra qual é qual e como conferir a sua página.

## Carregamento: gradientes ou imagens

`background: linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6);` tem 67 caracteres. Ele chega dentro da sua folha de estilo, não precisa de requisição extra e renderiza nítido em qualquer tamanho e densidade de pixels. Um fundo em imagem precisa da própria requisição, tem de ser decodificado antes de ser desenhado e precisa ser grande o bastante para telas grandes e de alta densidade.

67 caracteres de CSS: `linear-gradient(135deg, #1e1b4b, #7c3aed 55%, #f472b6)`

Este fundo inteiro, em qualquer tamanho, custa menos que uma frase de texto para carregar.

| Fundo | Download | Memória decodificada em 1920×1080 |
| --- | --- | --- |
| Gradiente CSS | Algumas dezenas de bytes no seu CSS | Nenhum bitmap a guardar; pintado conforme necessário |
| Imagem comprimida (AVIF, WebP, JPEG) | Um arquivo separado, muitas vezes de dezenas a centenas de kilobytes | Cerca de 8,3 MB (largura × altura × 4 bytes) |
| A mesma imagem em 3840×2160 para 4K nítido | Maior ainda | Cerca de 33 MB |

As imagens decodificadas são mantidas como bitmaps completos, seja qual for o tamanho do arquivo. Os números de memória são aritmética simples: pixels vezes quatro bytes.

Então, para fundos simples e moderadamente em camadas, o CSS ganha no carregamento sempre. As imagens ainda fazem sentido quando o fundo é realmente complexo, como um [gradiente de malha](https://gradiently.design/pt-br/guide/css-mesh-gradient) pictórico com muitos pontos de cor ou uma textura fotográfica. Aí a troca é peso de arquivo por riqueza visual, e muitas vezes vale a pena.

## Pintura: o que um gradiente custa na tela

Para mostrar um gradiente, o navegador calcula uma cor para cada pixel que ele cobre: isso é pintar. O trabalho cresce com a área pintada, o número de camadas de gradiente empilhadas e os efeitos por cima. Para um fundo estático, acontece uma vez, e o resultado é reaproveitado enquanto você rola ou interage, a menos que algo o invalide.

### Pintado uma vez

- Um gradiente estático em um card ou hero
- Vários brilhos radiais em camadas que não se movem
- Uma textura de ruído em mosaico sobre um gradiente
- Uma borda com gradiente desenhada com fundos

### Pintado de novo e de novo

- Animar `background-position` ou paradas de cor
- `background-attachment: fixed` durante a rolagem
- Desfoque de `backdrop-filter` sobre conteúdo em movimento
- Um elemento com gradiente que muda de tamanho o tempo todo

## Os riscos reais: desfoque, fundos fixos e animação

**Desfoques grandes.** O `filter: blur()` e o `backdrop-filter` amostram muitos pixels vizinhos para cada pixel, e o trabalho cresce com o raio do desfoque e com a área. Um gradiente desfocado que é pintado uma vez costuma ir bem. Um `backdrop-filter` sobre conteúdo que rola por baixo precisa ser recalculado conforme esse conteúdo se move, e é aí que as interfaces de [glassmorphism](https://gradiently.design/pt-br/guide/glassmorphism) tendem a engasgar em celulares modestos.

**Fundos fixos.** O `background-attachment: fixed` mantém um fundo parado enquanto a página rola, o que pode forçá-lo a repintar a cada passo da rolagem. Se você quer um gradiente que fique no lugar, um elemento `position: fixed` atrás do conteúdo costuma ser mais barato, porque o navegador pode movê-lo como uma camada separada.

**Animação.** Mover o `background-position` ou animar paradas de cor com `@property` repinta o elemento a cada quadro. Em um botão, isso é trivial. Em um hero de tela cheia, é trabalho contínuo enquanto a página estiver aberta, o que aparece como aquecimento e gasto de bateria nos celulares.

```css
/* repaints the whole hero every frame */
.hero--costly {
  background: linear-gradient(120deg, #1e1b4b, #7c3aed, #f472b6);
  background-size: 300% 300%;
  animation: pan 12s ease-in-out infinite alternate;
}

/* the browser can usually just move a finished layer */
.hero--cheap::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(#1e1b4b, #7c3aed, #f472b6, #1e1b4b);
  animation: turn 40s linear infinite;
}

@keyframes pan { to { background-position: 100% 50%; } }
@keyframes turn { to { transform: rotate(1turn); } }
```

Dois heroes animados. O segundo anima o `transform`, que os navegadores costumam tratar no compositor sem repintar.

O guia de [gradiente animado em CSS](https://gradiently.design/pt-br/guide/css-animated-gradient) traz o conjunto completo de técnicas, das mais baratas às mais flexíveis.

## Camadas e will-change

Promover um elemento à própria camada do compositor, com `will-change: transform` ou uma animação de transform ativa, é o que torna a animação barata possível. Não é de graça: cada camada guarda o próprio bitmap na memória gráfica, cerca de largura × altura × 4 bytes em pixels do dispositivo. Uma camada superdimensionada para o fundo de um hero é aceitável. Dezenas de cards promovidos, cada um com a própria camada de gradiente, podem usar mais memória do que poupam em tempo de pintura. Acrescente `will-change` aos elementos que realmente animam, não como regra geral.

| Padrão | Trabalho do navegador | Alternativa mais barata |
| --- | --- | --- |
| `background-position` animado em um hero | Repintura a cada quadro | `transform` em uma camada de gradiente superdimensionada |
| `background-attachment: fixed` | Repintura durante a rolagem | Uma camada de gradiente `position: fixed` atrás do conteúdo |
| `backdrop-filter` sobre conteúdo que rola | Desfoque recalculado conforme o conteúdo se move | Uma camada estática já desfocada, ou uma área desfocada menor |
| Filtro de ruído SVG ao vivo em um elemento grande | O filtro roda sobre cada pixel repintado | Uma pequena imagem de ruído em mosaico |
| `will-change` em todo card | Muitas camadas mantidas na memória gráfica | `will-change` só no que anima |

Padrões comuns de gradiente, o que eles fazem o navegador fazer e o jeito mais leve de chegar ao mesmo visual.

## Como medir o desempenho de gradientes

1. **Ative o destaque de pintura** No Chrome DevTools, abra o painel Rendering e ative Paint flashing. Tudo o que piscar em verde enquanto nada deveria mudar está sendo repintado.
2. **Grave um registro de Performance** Grave alguns segundos de rolagem ou de animação em repouso no painel Performance. Veja quanto de cada quadro é gasto em pintura e se há quadros perdidos.
3. **Limite a CPU** Use a limitação de CPU do painel Performance para simular um dispositivo mais lento. Um hero que é fluido em um notebook rápido pode sofrer em um celular intermediário.
4. **Confira o painel Layers** Veja quantas camadas de compositor existem e quanta memória elas usam. Camadas inesperadamente numerosas costumam indicar uso excessivo de `will-change`.
5. **Teste no dispositivo real** Termine em um celular de verdade. O calor e o gasto de bateria de uma animação constante são fáceis de perder em um desktop.

O [guia de desempenho de renderização do web.dev](https://web.dev/articles/rendering-performance) explica o pipeline por trás dessas ferramentas: estilo, layout, pintura e composição. Saber qual etapa o seu gradiente aciona diz se ele é barato.

## Um checklist de desempenho para gradientes

- Use gradientes CSS para fundos simples e em camadas; imagens só quando o visual realmente exigir.
- Mantenha os raios de desfoque modestos e evite `backdrop-filter` sobre áreas grandes que rolam.
- Troque o `background-attachment: fixed` por uma camada de posição fixa.
- Anime `transform` ou `opacity`, e não `background-position`, em áreas grandes.
- Animações lentas e ambientes podem parar por completo para quem usa [movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion).
- Adicione grão como uma pequena imagem em mosaico, não como um filtro SVG ao vivo em um elemento grande; veja [textura de ruído em CSS](https://gradiently.design/pt-br/guide/css-noise-texture).
- Meça antes e depois com o destaque de pintura e uma gravação de Performance.

## FAQ

### Gradientes CSS deixam um site lento?

Os gradientes CSS estáticos não deixam, de forma perceptível. Eles não precisam de download e são pintados uma vez. Desfoques grandes, fundos fixos e animação constante é que custam desempenho.

### Um gradiente CSS é mais rápido que uma imagem de fundo?

Em geral, sim. Um gradiente são algumas dezenas de bytes de CSS, sem requisição nem decodificação, enquanto uma imagem precisa de download e fica na memória como um bitmap completo.

### Gradientes animados são ruins para o desempenho?

Animar `background-position` ou paradas de cor repinta a cada quadro, o que pesa em áreas grandes. Animar `transform` ou `opacity` em uma camada de gradiente costuma ser bem mais barato.

### Por que meu fundo em gradiente desfocado está lento?

O desfoque amostra muitos pixels vizinhos para cada pixel, então o custo cresce com o raio e a área. É pior com `backdrop-filter` sobre conteúdo que rola ou anima.

### Como confiro se meu gradiente está repintando?

Ative o Paint flashing no painel Rendering do Chrome DevTools. As áreas que continuam piscando com a página parada estão sendo repintadas.