A versão curta
- 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.
Nesta página
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.
#1e3a8a, #f472b6O que acontece
#1e3a8a 20%, #f472b6 80%O que acontece
#1e3a8a, 30%, #f472b6O que acontece
#1e3a8a 50%, #f472b6 50%O que acontece
#1e3a8a 0 40%, #f472b6 40% 100%O que acontece
#1e3a8a 10px, #f472b6 200pxO que acontece
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.
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.
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.
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.
/* 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%);
}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.
- 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 percorre a sintaxe completa, e tipos de gradientes 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.
Perguntas frequentes
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.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil