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

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

A maior parte do código de gradiente gerado pode ser colada e está ligeiramente desatualizada. Aprende as quatro partes de um gradiente e escreves um mais depressa do que encontras um gerador, e afinas de formas que nenhum cursor oferece.

## The short version

- Um gerador de gradientes CSS transforma escolhas de cor e ângulo num valor de background-image que podes colar numa folha de estilos.
- Todos os gradientes CSS têm quatro partes: um tipo, uma direção ou posição, um espaço de cor de interpolação opcional e uma lista de paragens de cor.
- Os geradores mais antigos ainda produzem prefixos de fabricantes e filtros legados do Internet Explorer, de que os navegadores modernos não precisam.
- Acrescentar uma terceira paragem de cor, um espaço de interpolação como oklch ou uma segunda camada costuma melhorar mais o resultado gerado do que mudar as cores.
- Guardar um gradiente acabado numa propriedade personalizada torna-o reutilizável em todo o site e fácil de alterar num só sítio.

Um **gerador de gradientes CSS** dá-te um valor de gradiente para colar, como `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`, depois de escolheres cores e um ângulo. É um bom ponto de partida. Mas um gradiente CSS é curto o bastante para se escrever à mão em menos de um minuto, e é no código escrito à mão que estão as melhorias: uma terceira paragem, 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 teu.

## As quatro partes de cada 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 cursores de um gerador controlam corresponde a uma destas quatro partes.

| Parte | Opções | Predefinição se omitida |
| --- | --- | --- |
| Tipo | `linear`, `radial`, `conic`, mais as versões `repeating` | Nenhuma, tens de escolher |
| Direção ou posição | `160deg`, `to top right`, `circle at 80% 20%`, `from 90deg` | De cima para baixo; elipse centrada; a partir de 0deg |
| Espaço de cor | `in oklab`, `in oklch`, `in srgb` e outros | sRGB para cores hex |
| Paragens | Quaisquer cores, com posições opcionais em percentagem ou comprimento | Distribuídas por igual de 0% a 100% |

As predefinições explicam porque tantos gradientes gerados se parecem: duas paragens, distribuídas por igual, misturadas em sRGB.

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

## Receitas de gradientes para copiar

Estas são escritas à mão e não geradas, e cada uma usa uma ideia que um gerador básico raramente dá: uma luz descentrada, três paragens em vez de duas ou um espaço de cor escolhido. Clica em qualquer uma para a copiar.

- Crepúsculo, três paragens: `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 por rosa: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

A última só tem duas paragens, mas a mistura em oklch leva o tom por um rosa vivo, onde o sRGB dá um malva mais baço. Os navegadores sem suporte de espaço de cor ficam sem gradiente, por isso declara primeiro um gradiente simples.

## Como limpar o resultado de um gerador

Cola o resultado de um gerador antigo e podes receber cinco linhas onde uma chega. Os gradientes com prefixo e o filtro do Internet Explorer são desnecessários há anos; pesam e, no caso da antiga sintaxe `-webkit-`, usam um sistema de ângulos diferente que confunde quem edita depois.

### Resultado antigo típico

- `background: #1e1b4b;` e depois 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 limpo

- Uma `background-color` sólida de reserva
- Um só `linear-gradient()` sem prefixo
- Sem filtros
- 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 resultado de um gerador antigo tentava dizer, em duas linhas.

O teu navegador também é um gerador decente. Abre as ferramentas de programador, seleciona o elemento e clica em qualquer amostra de cor dentro do gradiente no painel Styles: recebes um seletor de cor para essa paragem e podes editar ângulos e percentagens no local enquanto a página se atualiza em direto. Copia o valor final para a tua folha de estilos. Para afinar um gradiente contra conteúdo real, isto vence qualquer ferramenta autónoma, porque o vês por trás do teu título verdadeiro.

## Cinco edições que vencem qualquer cursor

1. **Acrescenta uma paragem intermédia** Duas paragens dão uma rampa reta. Uma terceira cor a cerca de 50 a 60 por cento acrescenta profundidade e deixa-te controlar onde se dá a mudança.
2. **Escolhe o espaço de cor** Acrescenta `in oklab` para manter limpas as misturas entre cores distantes, ou `in oklch` para deixar o tom viajar. A [interpolação de gradientes](https://gradiently.design/pt-pt/guide/gradient-interpolation) mostra a diferença.
3. **Tira a luz do centro** Troca um gradiente linear por `radial-gradient(circle at 80% 20%, ...)` para que a cor mais brilhante venha de um canto, como uma fonte de luz.
4. **Empilha dois ou três gradientes** Separa vários valores por vírgulas em `background-image`. Brilhos radiais sobre uma base linear parecem muito mais ricos do que um só gradiente; os [gradientes de malha em CSS](https://gradiently.design/pt-pt/guide/css-mesh-gradient) levam isto mais longe.
5. **Acrescenta um pouco de grão** Uma camada ténue de ruído esconde as bandas em gradientes grandes e escuros. O código está na [textura de ruído em CSS](https://gradiently.design/pt-pt/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 canto superior direito, uma poça índigo no canto inferior esquerdo, uma base escura. A primeira camada listada fica por cima.

## Transformar um gradiente num token reutilizável

Quando um gradiente estiver certo, dá-lhe um nome. Uma propriedade personalizada guarda o valor inteiro, por isso botões, banners e o herói podem partilhá-lo, e um redesenho toca numa só linha. As [variáveis CSS para temas](https://gradiently.design/pt-pt/guide/css-custom-properties-theming) mostram 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 o lado. Se as cores mudarem, mais nada na folha de estilos tem de mudar.

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

Os geradores e o CSS escrito à mão partilham o mesmo limite: o resultado é uma lista de paragens que qualquer pessoa pode ler na tua folha de estilos e reutilizar. Serve para pormenores de interface. Para o fundo pelo qual as pessoas te reconhecem, no teu site e em todas as publicações, podes querer 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-pt/guide/gradient-generator).

Os Marks do Gradiently vão além do que o CSS consegue descrever: materiais empilhados, luz, grão e movimento, desenhados em direto a todos os tamanhos, com exatamente um dono de cada vez. Podes desenhar com qualquer Mark por reservar, de graça, e pesquisar no Mercado por palavras de cor para encontrar um próximo do gradiente que tentavas escrever.

## FAQ

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

Uma ferramenta que te deixa escolher cores, ângulo e tipo de forma visual e depois produz um valor `linear-gradient()`, `radial-gradient()` ou `conic-gradient()` para colar em CSS.

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

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

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

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

### Porque parece lamacento no meio o meu gradiente gerado?

Mistura em sRGB, que acinzenta entre cores distantes. Acrescenta `in oklab` depois do ângulo, ou uma paragem intermédia numa cor mais limpa.

### Como reutilizo um gradiente num site?

Guarda o gradiente inteiro numa propriedade personalizada como `--gradient-brand` e usa `var(--gradient-brand)` onde precisares.