# Gradientes no Figma: dicas para resultados mais suaves

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

O Figma faz um gradiente em dois cliques e um bom gradiente em vinte. Aqui está o caminho rápido pelo editor de gradiente, mais as correções para meios acinzentados, banding e CSS que não combina.

## The short version

- O Figma oferece quatro tipos de preenchimento em gradiente: linear, radial, angular e losango, todos escolhidos no menu de tipo de preenchimento do seletor de cor.
- A direção e o comprimento do gradiente são definidos com alças no canvas, e novas paradas de cor são acrescentadas clicando na barra do gradiente no seletor.
- Gradientes longos no Figma entre matizes distantes podem ficar cinzentos no meio, então acrescente uma parada intermediária numa cor mais viva.
- Gradientes linear, radial e angular têm equivalentes diretos em CSS, mas os de losango não têm e é melhor exportá-los como imagens.
- Um gradiente tipo malha no Figma costuma ser feito desfocando um grupo de elipses coloridas, e o grão esconde o banding na exportação.

Para fazer um **gradiente no Figma**, selecione uma camada, clique na amostra de preenchimento dela e mude o tipo de preenchimento de Solid para Linear, Radial, Angular ou Diamond. Alças aparecem no canvas: arraste-as para definir a direção e o alcance da mistura e clique na barra do gradiente no seletor para acrescentar paradas de cor. Isso leva segundos. Deixá-lo suave, rico e idêntico quando chega ao código exige mais alguns hábitos, e é disso que trata este guia.

## Os quatro tipos de gradiente no Figma

- Linear: `linear-gradient(135deg, #0f172a, #4338ca 55%, #a5b4fc)`
- Radial: `radial-gradient(ellipse at 50% 50%, #fde68a, #f97316 45%, #7c2d12)`
- Angular: `conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9)`

Preenchimentos linear, radial e angular, desenhados aqui com os equivalentes em CSS. O losango não tem correspondente em CSS.

| Preenchimento do Figma | O que desenha | Equivalente em CSS |
| --- | --- | --- |
| Linear | Uma mistura ao longo de uma linha reta | `linear-gradient()` |
| Radial | Uma mistura para fora a partir de um centro, como elipse | `radial-gradient()` |
| Angular | Uma varredura de cor em torno de um centro | `conic-gradient()` |
| Losango | Uma mistura para fora num losango de quatro pontas | Nenhum; exporte como imagem |

Os tipos de gradiente do Figma e como eles se traduzem para a web.

O linear serve à maioria dos fundos e botões. O radial serve a brilhos e holofotes. O angular desenha círculos cromáticos, mostradores e brilhos metálicos. O losango raramente é necessário; ele dá um brilho facetado em quatro direções que fica distintivo numa ilustração, mas na web precisa virar bitmap. Para saber como cada tipo se comporta no design em geral, veja [os tipos de gradiente](https://gradiently.design/pt-br/guide/types-of-gradients).

## Trabalhando no editor de gradiente

1. **Defina a direção com as alças** Uma alça marca onde fica a primeira cor, a outra onde fica a última. Arraste a alça final além da borda do frame para uma mistura mais suave ou puxe-a para dentro para uma mais curta e íngreme.
2. **Acrescente paradas na barra** Clique em qualquer ponto da barra do gradiente no seletor de cor para acrescentar uma parada e depois dê a ela uma cor. Selecione uma parada e pressione Delete para removê-la.
3. **Use a opacidade das paradas para esmaecer** Cada parada tem a própria opacidade. Esmaecer uma cor até 0% de opacidade deixa um gradiente se sobrepor a uma foto ou a outro preenchimento.
4. **Empilhe preenchimentos** Uma camada pode ter vários preenchimentos. Acrescente um segundo gradiente acima do primeiro, com áreas transparentes, para pôr um brilho em camadas sobre uma mistura de base.
5. **Salve como um estilo** Salve o preenchimento finalizado como um estilo de cor para que a equipe toda use o mesmo gradiente. As variáveis do Figma não guardam gradientes, mas os estilos guardam.

> **Alças radiais** Os preenchimentos radial e losango têm uma terceira alça que define a largura da elipse independentemente da altura. Esticá-la é o que dá um brilho largo de horizonte em vez de um holofote redondo.

## Corrigindo meios cinzentos e misturas sujas

O Figma mistura as paradas de cor diretamente, como o CSS faz por padrão, e não tem opção de misturar num espaço de cor perceptual. Uma mistura longa entre matizes distantes, como azul a laranja ou azul a amarelo, afunda em cinza no meio. A correção é uma parada intermediária: escolha a cor que você quer no ponto médio, em geral um matiz intermediário mais vivo, e acrescente-a à mão. Os [gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients) explicam a teoria das cores.

- Duas paradas: meio cinzento: `linear-gradient(90deg, #2563eb, #f97316)`
- Com parada no meio: vívido: `linear-gradient(90deg, #2563eb, #db2777 50%, #f97316)`

Azul a laranja, antes e depois de uma parada extra. A parada do meio leva a mistura pelo rosa em vez do cinza.

## Gradientes tipo malha no Figma

O Figma não tem uma ferramenta de gradiente de malha, mas uma versão convincente é rápida de montar. Desenhe quatro ou cinco elipses nas suas cores, sobrepostas, dentro de um frame com fundo escuro ou claro. Agrupe-as, aplique um Layer blur grande ao grupo e recorte o conteúdo do frame. Mova as elipses para reequilibrar a cor. É a mesma ideia da técnica em camadas dos [gradientes de malha em CSS](https://gradiently.design/pt-br/guide/css-mesh-gradient), e os [gradientes de malha](https://gradiently.design/pt-br/guide/mesh-gradients) tratam do lado do design.

### Evite

- Elipses do mesmo tamanho espaçadas por igual
- Matizes opostos se sobrepondo no centro
- Valores de desfoque pequenos que deixam bordas duras nas elipses
- Exportar uma malha grande, escura e desfocada sem grão

### Faça

- Uma mancha dominante e duas ou três menores
- Matizes vizinhos se sobrepondo, contrastes mantidos afastados
- Um desfoque grande o bastante para não sobrarem bordas
- Uma camada leve de ruído por cima antes de exportar

## Acrescentando grão para esconder o banding

Gradientes suaves exportados como PNG ou JPEG de 8 bits podem mostrar degraus visíveis, sobretudo em esmaecimentos escuros e lentos. Uma camada leve de ruído quebra esses degraus. As versões recentes do Figma incluem opções de ruído e textura no painel Effects; do contrário, coloque uma imagem de ruído repetida sobre o gradiente com um modo de mesclagem como Overlay ou Soft light em baixa opacidade. O [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding) explica por que isso funciona e os [gradientes com grão](https://gradiently.design/pt-br/guide/grainy-gradients) explicam por que fica também mais bonito.

## Exportando e reproduzindo gradientes do Figma em CSS

No Dev Mode ou no painel Inspect, o Figma mostra o CSS dos preenchimentos em gradiente. Trate-o como ponto de partida e confira três coisas. Primeiro, o ângulo: as alças que você arrastou num frame não quadrado podem virar um ângulo que você não escolheria, então arredonde para um valor limpo. Segundo, o perfil de cor: se o seu arquivo usa Display P3, os mesmos valores hex podem parecer diferentes num navegador sRGB. Terceiro, os preenchimentos empilhados: eles viram gradientes separados por vírgula, com o preenchimento de cima do Figma listado primeiro.

```css
/* Figma: linear fill, #0f172a to #4338ca to #a5b4fc, top left to bottom right */
.hero {
  background-color: #0f172a;
  background-image: linear-gradient(135deg, #0f172a 0%, #4338ca 55%, #a5b4fc 100%);
}

/* Figma: angular fill */
.dial {
  background-image: conic-gradient(from 0deg, #0ea5e9, #a855f7, #f43f5e, #f59e0b, #0ea5e9);
}
```

Traduções típicas. Mantenha uma cor chapada de reserva tirada da parada mais escura do gradiente.

Para imagens, exporte em 2x para resultados nítidos em telas de alta densidade e prefira PNG para gradientes com transparência. Para gradientes que precisam continuar vetoriais, a exportação em SVG grava os preenchimentos linear e radial como gradientes SVG; veja os [gradientes SVG](https://gradiently.design/pt-br/guide/svg-gradients) para entender o que você recebe. Preenchimentos em losango, malhas desfocadas e ruído sempre saem como pixels.

Se você cria muitos fundos de gradiente para posts sociais, apresentações e banners, uma ferramenta que renderiza o mesmo material em cada tamanho evita reexportar. No Gradiently, um Mark é renderizado ao vivo em cada formato, em vez de recortado de uma só exportação.

## FAQ

### Como faço um gradiente no Figma?

Selecione uma camada, clique na amostra de preenchimento dela e mude Solid para Linear, Radial, Angular ou Diamond. Arraste as alças no canvas e clique na barra do gradiente para acrescentar paradas.

### Como acrescento uma parada de cor a um gradiente do Figma?

Clique em qualquer ponto da barra do gradiente no seletor de cor. Selecione uma parada e pressione Delete para removê-la.

### O Figma faz gradientes de malha?

Nativamente, não. Sobreponha várias elipses coloridas, agrupe-as e aplique um Layer blur grande, ou use um plugin.

### Por que o meu gradiente do Figma parece diferente no navegador?

Confira o ângulo que o Figma exportou, se o arquivo usa um perfil de cor Display P3 e se os preenchimentos empilhados foram traduzidos na ordem certa.

### Posso copiar um gradiente do Figma como CSS?

Pode, para preenchimentos linear, radial e angular, pelo Dev Mode ou pelo painel Inspect. Gradientes em losango não têm equivalente em CSS e devem ser exportados como imagens.