# Gerador de gradiente CSS: escreva gradientes à mão ou com ferramentas

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

A maior parte do código gerado pode ser colada e está um pouco desatualizada. Aprenda as quatro partes de um gradiente e você escreve um mais rápido do que encontra um gerador, e ainda ajusta coisas que nenhum controle deslizante oferece.

## The short version

- Um gerador de gradiente CSS transforma escolhas de cor e ângulo num valor de background-image que você cola na folha de estilos.
- Todo gradiente CSS tem quatro partes: um tipo, uma direção ou posição, um espaço de cor de interpolação opcional e uma lista de paradas de cor.
- Geradores mais antigos ainda produzem prefixos de navegador e filtros legados do Internet Explorer, que os navegadores modernos dispensam.
- Acrescentar uma terceira parada, um espaço de interpolação como oklch ou uma segunda camada costuma melhorar o código gerado mais do que trocar as cores.
- Guardar o gradiente pronto numa propriedade personalizada permite reutilizá-lo no site inteiro e alterá-lo num lugar só.

Um **gerador de gradiente CSS** entrega um valor pronto para colar, como `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`, depois que você escolhe as cores e o ângulo. É um bom ponto de partida. Mas um gradiente CSS é curto o bastante para escrever à mão em menos de um minuto, e é no código escrito à mão que moram as melhorias: uma terceira parada, um espaço de cor melhor, uma segunda camada. Esta página mostra como ler o resultado de um gerador, limpá-lo e escrever o seu.

## As quatro partes de todo gradiente CSS

```css
.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }
```

Tudo o que os controles de um gerador ajustam corresponde a uma destas quatro partes.

| Parte | Opções | Padrão se omitida |
| --- | --- | --- |
| Tipo | `linear`, `radial`, `conic`, além das versões `repeating` | Nenhum, você precisa escolher |
| Direção ou posição | `160deg`, `to top right`, `circle at 80% 20%`, `from 90deg` | De cima para baixo; elipse centralizada; a partir de 0deg |
| Espaço de cor | `in oklab`, `in oklch`, `in srgb` e outros | sRGB para cores hex |
| Paradas | Quaisquer cores, com posições opcionais em porcentagem ou comprimento | Distribuídas por igual de 0% a 100% |

Os padrões explicam por que tantos gradientes gerados se parecem: duas paradas, distribuídas por igual, misturadas em sRGB.

Cada tipo tem seu próprio guia: [gradientes lineares](https://gradiently.design/pt-br/guide/css-linear-gradient), [gradientes radiais](https://gradiently.design/pt-br/guide/css-radial-gradient) e [gradientes cônicos](https://gradiently.design/pt-br/guide/css-conic-gradient).

## Receitas de gradiente para copiar

Estas foram escritas à mão, não geradas, e cada uma usa uma ideia que um gerador básico raramente oferece: uma luz fora do centro, três paradas em vez de duas ou um espaço de cor escolhido. Clique em qualquer uma para copiar.

- Crepúsculo, três paradas: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`
- Vidro do mar: `linear-gradient(135deg, #ecfeff 0%, #99f6e4 50%, #2dd4bf 100%)`
- Brasa no canto: `radial-gradient(circle at 85% 15%, #fb923c 0%, #9a3412 35%, #1c0a05 75%)`
- Papel suave: `linear-gradient(180deg, #fdf6ec 0%, #f5e6d3 100%)`
- Verde boreal: `radial-gradient(ellipse at 30% 70%, #34d399 0%, #0f766e 40%, #042f2e 80%)`
- Violeta a laranja passando pelo rosa: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

O último tem só duas paradas, mas a mistura em oklch leva o matiz por um rosa vivo, onde o sRGB daria um malva mais apagado. Navegadores sem suporte a espaço de cor ficam sem gradiente, então declare antes um gradiente simples.

## Como limpar o código de um gerador

Cole o resultado de um gerador antigo e você pode receber cinco linhas onde uma basta. Gradientes com prefixo e o filtro do Internet Explorer são desnecessários há anos; eles pesam o código e, no caso da sintaxe antiga `-webkit-`, usam outro sistema de ângulos que confunde quem for editar depois.

### Resultado antigo típico

- `background: #1e1b4b;` seguido de três cópias com prefixo
- `-webkit-linear-gradient(left, ...)` com as regras antigas de ângulo
- `filter: progid:DXImageTransform...` para o Internet Explorer
- `rgba(30, 27, 75, 1)` para cores totalmente opacas

### Código moderno e limpo

- Um único `background-color` sólido como alternativa
- Um único `linear-gradient()` sem prefixo
- Nenhum filtro
- Hex curto ou `rgb(30 27 75 / 0.5)` só onde o alfa importa

```css
.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}
```

Tudo o que o código de um gerador antigo tentava dizer, em duas linhas.

O próprio navegador também é um bom gerador. Abra as ferramentas de desenvolvedor, selecione o elemento e clique em qualquer amostra de cor dentro do gradiente no painel Styles: aparece um seletor de cor para aquela parada, e você edita ângulos e porcentagens ali mesmo enquanto a página se atualiza ao vivo. Depois copie o valor final de volta para a folha de estilos. Para ajustar um gradiente com conteúdo real, isso supera qualquer ferramenta avulsa, porque você o vê atrás do seu título de verdade.

## Cinco ajustes que superam qualquer controle deslizante

1. **Acrescente uma parada no meio** Duas paradas dão uma rampa reta. Uma terceira cor por volta de 50 a 60 por cento traz profundidade e permite controlar onde a mudança acontece.
2. **Escolha o espaço de cor** Acrescente `in oklab` para manter limpas as misturas entre cores distantes, ou `in oklch` para deixar o matiz viajar. [Interpolação de gradientes](https://gradiently.design/pt-br/guide/gradient-interpolation) mostra a diferença.
3. **Tire a luz do centro** Troque um gradiente linear por `radial-gradient(circle at 80% 20%, ...)` para que a cor mais clara venha de um canto, como uma fonte de luz.
4. **Sobreponha dois ou três gradientes** Separe vários valores por vírgula em `background-image`. Brilhos radiais sobre uma base linear ficam muito mais ricos que um gradiente só; os [gradientes mesh em CSS](https://gradiently.design/pt-br/guide/css-mesh-gradient) levam isso adiante.
5. **Acrescente um pouco de granulação** Uma camada leve de ruído esconde o banding em gradientes grandes e escuros. O código está em [textura de ruído em CSS](https://gradiently.design/pt-br/guide/css-noise-texture).

```css
.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}
```

Três camadas escritas à mão: uma luz rosa no alto à direita, uma poça índigo embaixo à esquerda e uma base escura. A primeira camada da lista fica por cima.

## Como transformar um gradiente num token reutilizável

Quando o gradiente estiver certo, dê um nome a ele. Uma propriedade personalizada guarda o valor inteiro, então botões, banners e o hero podem compartilhá-lo, e um redesign mexe numa linha só. [Variáveis CSS para temas](https://gradiently.design/pt-br/guide/css-custom-properties-theming) mostra como trocar tokens de gradiente por marca ou modo.

```css
:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }
```

Uma definição, usada em todo lugar. Se as cores mudarem, nada mais na folha de estilos precisa mudar.

## Quando um gerador não é a ferramenta certa

Geradores e CSS escrito à mão têm o mesmo limite: o resultado é uma lista de paradas que qualquer pessoa pode ler na sua folha de estilos e reutilizar. Para detalhes de interface, tudo bem. Para o fundo pelo qual as pessoas reconhecem você, no site e em cada post, talvez você queira algo mais rico e mais difícil de copiar. O conselho mais amplo está em [como usar um gerador de gradientes](https://gradiently.design/pt-br/guide/gradient-generator).

Os Marks do Gradiently vão além do que o CSS consegue descrever: materiais sobrepostos, luz, granulação e movimento, renderizados ao vivo em qualquer tamanho, com exatamente um dono por vez. Você pode criar com qualquer Mark não reservado de graça e buscar no Mercado por palavras de cor para encontrar um parecido com o gradiente que estava tentando escrever.

## FAQ

### O que é um gerador de gradiente CSS?

Uma ferramenta que permite escolher cores, ângulo e tipo visualmente e depois entrega um valor `linear-gradient()`, `radial-gradient()` ou `conic-gradient()` para colar no CSS.

### Ainda preciso de prefixos -webkit- nos gradientes CSS?

Não. Gradientes sem prefixo funcionam em todos os navegadores atuais. Remova as cópias com prefixo e os filtros antigos do Internet Explorer do código gerado.

### Como escrevo um gradiente CSS à mão?

Escolha um tipo, uma direção e duas ou mais paradas de cor: `linear-gradient(160deg, #1e1b4b, #6d28d9 55%, #f472b6)`.

### Por que meu gradiente gerado fica turvo no meio?

Ele mistura em sRGB, que acinzenta a transição entre cores distantes. Acrescente `in oklab` depois do ângulo ou uma parada no meio com uma cor mais limpa.

### Como reutilizo um gradiente no site inteiro?

Guarde o gradiente inteiro numa propriedade personalizada como `--gradient-brand` e use `var(--gradient-brand)` onde precisar.