# Paragens de cor em gradientes: misturas suaves

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

Dois gradientes com cores idênticas podem não se parecer nada. A diferença está em onde ficam as paragens e em como a mistura viaja entre elas. É a parte de um gradiente em que a maioria nunca toca.

## The short version

- As paragens de cor de um gradiente são os pontos ao longo dele onde se atinge uma cor concreta, escritas como uma cor seguida de uma posição, como `#7c3aed 40%`.
- As paragens sem posições distribuem-se por igual, o que raramente é a escolha de aspeto mais natural.
- Um indicador de cor é uma percentagem isolada entre duas paragens que desloca o ponto médio da mistura sem acrescentar uma cor.
- Duas paragens na mesma posição criam uma aresta dura, que é como se fazem riscas e faixas nítidas em CSS.
- Acrescentar várias paragens intermédias que seguem uma curva de suavização elimina a aresta visível onde um esbatido linear começa e acaba.

As **paragens de cor de um gradiente** são os pontos onde o gradiente atinge uma cor concreta. Em CSS cada paragem é uma cor e uma posição opcional, como `#7c3aed 40%`, e o navegador mistura em linha reta entre paragens vizinhas. O sítio onde as colocas decide quase tudo: se uma mistura parece suave ou abrupta, se uma cor domina e se o olho vê uma junção onde um esbatido começa. Mover paragens é muitas vezes uma melhoria maior do que mudar cores.

## Como funcionam as paragens de cor

Uma linha de gradiente vai de 0 por cento a 100 por cento. Cada paragem fixa uma cor num ponto dessa linha. Se omitires as posições, o navegador espaça as paragens por igual, e três cores ficam em 0, 50 e 100 por cento. Entre cada par, a cor muda a um ritmo constante. A sintaxe completa está documentada na [referência de linear-gradient() da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

| O que escreves | O que acontece |
| --- | --- |
| `#1e3a8a, #f472b6` | Duas paragens em 0% e 100% |
| `#1e3a8a 20%, #f472b6 80%` | Azul-marinho sólido até 20%, mistura, rosa sólido depois de 80% |
| `#1e3a8a, 30%, #f472b6` | Um indicador de cor: o ponto médio passa para 30% |
| `#1e3a8a 50%, #f472b6 50%` | Uma aresta dura ao centro, sem mistura |
| `#1e3a8a 0 40%, #f472b6 40% 100%` | Posição dupla: duas faixas sólidas |
| `#1e3a8a 10px, #f472b6 200px` | Os comprimentos funcionam tal como as percentagens |

Sintaxe de paragens em CSS. As mesmas ideias aplicam-se no Figma, no Photoshop e em qualquer editor de gradientes, só que com cursores.

## Porque é que paragens com espaçamento igual parecem artificiais

A luz real raramente muda a um ritmo igual. Um pôr do sol é sobretudo uma cor com uma faixa estreita de mudança perto do horizonte; uma sombra é sobretudo um tom médio com uma queda curta na margem. O espaçamento igual dá a cada cor a mesma fatia, o que se lê como um gráfico. Decide que cor lidera e deixa-a ficar com a maior parte do espaço.

- Igual: 0, 50, 100: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 50%, #be123c 100%)`
- Com pesos: o azul lidera: `linear-gradient(180deg, #0c4a6e 0%, #0e7490 58%, #f59e0b 84%, #be123c 100%)`
- Com pesos: topo quente: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 22%, #be123c 40%, #4c0519 100%)`

Uma paleta, três colocações. As versões com pesos parecem um céu em dois momentos diferentes; a igual parece gerada.

## Indicadores de cor: mover o ponto médio

Um indicador de cor é uma percentagem solta colocada entre duas paragens. Não acrescenta uma cor; move o ponto onde a mistura está exatamente a meio. Um indicador a 20 por cento significa que a cor chega cedo ao ponto médio, por isso a segunda cor chega depressa e depois demora-se. Os indicadores são a forma mais barata de fazer um gradiente de duas cores parecer menos mecânico.

- Sem indicador, ponto médio 50%: `linear-gradient(90deg, #4c1d95, #f9a8d4)`
- Indicador a 25%: `linear-gradient(90deg, #4c1d95, 25%, #f9a8d4)`
- Indicador a 75%: `linear-gradient(90deg, #4c1d95, 75%, #f9a8d4)`

O mesmo violeta para rosa. Mover o indicador faz uma cor dominar sem editar nenhuma delas.

## Paragens rígidas para riscas e faixas

Quando duas paragens partilham uma posição, não há distância para misturar, por isso a cor muda instantaneamente. É assim que se desenham riscas, fundos divididos, barras de progresso e bandeiras só com um gradiente. A sintaxe de posição dupla, `cor início fim`, torna-o mais curto de escrever. Os gradientes repetidos pegam na mesma ideia e fazem-na em mosaico, o que está em [gradientes lineares repetidos](https://gradiently.design/pt-pt/guide/css-repeating-gradient).

- Metade e metade: `linear-gradient(90deg, #0f172a 0 50%, #f8fafc 50% 100%)`
- Três faixas: `linear-gradient(180deg, #fde68a 0 33%, #fb923c 33% 66%, #e11d48 66% 100%)`
- Degraus diagonais: `linear-gradient(135deg, #312e81 0 40%, #6d28d9 40% 60%, #c084fc 60% 100%)`

Paragens rígidas em ação. Sem mistura, só arestas.

## Paragens suavizadas: eliminar a junção

Uma mistura linear tem um início e um fim visíveis. Esbate uma sombra escura até ficar transparente sobre uma foto e muitas vezes consegues ver uma linha onde o esbatido começa, porque o ritmo de mudança salta de zero para a velocidade máxima. Colocar várias paragens intermédias ao longo de uma curva de suavização resolve: a cor começa a mudar devagar, acelera e depois assenta. É especialmente útil para sobreposições atrás de texto e para [gradientes transparentes](https://gradiently.design/pt-pt/guide/css-gradient-transparent).

```css
/* Linear: a visible edge where the fade starts */
.scrim-linear {
  background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%);
}

/* Eased: stops follow an ease in out curve, no edge */
.scrim-eased {
  background: linear-gradient(180deg,
    rgba(10, 12, 20, 0) 40%,
    rgba(10, 12, 20, 0.02) 46%,
    rgba(10, 12, 20, 0.08) 52%,
    rgba(10, 12, 20, 0.18) 58%,
    rgba(10, 12, 20, 0.32) 66%,
    rgba(10, 12, 20, 0.48) 74%,
    rgba(10, 12, 20, 0.62) 82%,
    rgba(10, 12, 20, 0.73) 91%,
    rgba(10, 12, 20, 0.8) 100%);
}
```

Ambas as sombras acabam com a mesma força. A suavizada não tem linha onde começa.

> **A mesma ideia em movimento** As paragens suavizadas são a versão em gradiente de uma curva de suavização numa animação. [Suavização](https://gradiently.design/pt-pt/guide/easing) explica porque é que a entrada e saída suaves parecem naturais, e o mesmo raciocínio aplica-se aqui.

## Colocar paragens: um método prático

1. **Escolhe a cor que lidera** Dá-lhe 50 a 70 por cento da linha. Define o ambiente.
2. **Coloca a mudança onde o olhar deve ir** Põe a mudança de cor mais rápida perto do ponto focal, e não no meio por predefinição.
3. **Acrescenta indicadores antes de acrescentares cores** Se uma mistura parece desajustada, tenta primeiro mover o seu ponto médio. Cores extra acrescentam complexidade.
4. **Verifica os pontos médios** Olha para a cor a meio caminho entre cada par. Se for cinzenta, acrescenta uma ponte ou mistura em OKLCH, como se explica em [interpolação de gradientes](https://gradiently.design/pt-pt/guide/gradient-interpolation).
5. **Suaviza os esbatidos longos** Para tudo o que se esbata até ficar transparente ou numa cor lisa, acrescenta paragens intermédias para não haver junção.

### Evita

- Dar a cada cor uma fatia igual
- Acrescentar uma cor nova para corrigir cada problema
- Esbatidos lineares até transparente atrás de texto
- Paragens rígidas onde querias misturas suaves

### Faz

- Uma cor que lidera, as outras a chegar tarde
- Indicadores de cor para deslocar uma mistura
- Paragens suavizadas para sombras e esbatidos
- Paragens rígidas só para riscas e faixas

Se quiseres ver as paragens na sua forma mais simples, [gradientes lineares em CSS](https://gradiently.design/pt-pt/guide/css-linear-gradient) percorre a sintaxe completa, e [tipos de gradientes](https://gradiently.design/pt-pt/guide/types-of-gradients) mostra como as paragens se comportam em gradientes radiais e cónicos. No Gradiently, um Mark trata da sua própria mistura e luz em todos os tamanhos, por isso podes começar a desenhar logo e gastar o tempo nas palavras.

## FAQ

### O que é uma paragem de cor de um gradiente?

Um ponto ao longo de um gradiente onde se atinge uma cor concreta, escrito em CSS como uma cor com uma posição opcional, como `#7c3aed 40%`.

### O que acontece se não der posição às paragens?

O navegador distribui-as por igual de 0 a 100 por cento. Três cores ficam em 0, 50 e 100 por cento.

### O que é um indicador de cor num gradiente CSS?

Uma percentagem isolada entre duas paragens, como `#4c1d95, 25%, #f9a8d4`. Move o ponto médio da mistura sem acrescentar uma cor.

### Como faço uma linha dura num gradiente CSS?

Dá a duas paragens a mesma posição, por exemplo `#0f172a 50%, #f8fafc 50%`, ou usa a sintaxe de posição dupla `#0f172a 0 50%, #f8fafc 50% 100%`.

### Como faço um gradiente esbater-se suavemente até ficar transparente?

Acrescenta várias paragens intermédias cuja opacidade siga uma curva de entrada e saída suaves. Um esbatido simples de duas paragens mostra muitas vezes uma linha onde começa.