Resumindo
- Paradas de cor são os pontos de um gradiente onde uma cor específica é atingida, escritos como uma cor seguida de uma posição, como
#7c3aed 40%. - Paradas sem posição são distribuídas por igual, o que raramente é a escolha de aparência mais natural.
- Uma dica de cor é uma porcentagem solta entre duas paradas que move o ponto médio da mistura sem adicionar uma cor.
- Duas paradas na mesma posição criam uma borda dura, que é como listras e faixas nítidas são feitas no CSS.
- Adicionar várias paradas intermediárias que seguem uma curva de easing elimina a borda visível onde uma transição linear começa e termina.
Nesta página
Paradas de cor do gradiente são os pontos em que o gradiente atinge uma cor específica. No CSS cada parada é uma cor com uma posição opcional, como #7c3aed 40%, e o navegador mistura em linha reta entre paradas vizinhas. Onde você as coloca decide quase tudo: se a mistura parece suave ou brusca, se uma cor domina e se o olho vê uma emenda onde a transição começa. Mover as paradas muitas vezes melhora mais do que trocar as cores.
Como funcionam as paradas de cor
A linha do gradiente vai de 0 a 100 por cento. Cada parada fixa uma cor num ponto dessa linha. Se você omitir as posições, o navegador espaça as paradas por igual, então três cores caem em 0, 50 e 100 por cento. Entre cada par, a cor muda num ritmo constante. A sintaxe completa está na referência de linear-gradient() do 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
Por que paradas igualmente espaçadas parecem artificiais
A luz real raramente muda num ritmo uniforme. Um pôr do sol é quase todo de uma cor, com uma faixa estreita de mudança perto do horizonte; uma sombra é quase toda de tom médio, com uma queda curta na borda. O espaçamento igual dá a cada cor a mesma fatia, o que parece um gráfico. Decida qual cor lidera e deixe que ela ocupe a maior parte do espaço.
Dicas de cor: movendo o ponto médio
Uma dica de cor é uma porcentagem sozinha entre duas paradas. Ela não adiciona cor; ela move o ponto em que a mistura está exatamente na metade. Uma dica em 20 por cento faz a cor chegar ao meio cedo, então a segunda cor aparece rápido e depois se demora. As dicas são o jeito mais barato de deixar um gradiente de duas cores menos mecânico.
Paradas duras para listras e faixas
Quando duas paradas dividem a mesma posição, não há distância para misturar, então a cor muda na hora. É assim que listras, fundos divididos, barras de progresso e bandeiras são desenhados só com gradiente. A sintaxe de posição dupla, cor início fim, deixa a escrita mais curta. Os gradientes repetidos pegam a mesma ideia e a repetem lado a lado, como em gradientes lineares repetidos.
Paradas suavizadas: eliminando a emenda
Uma mistura linear tem início e fim visíveis. Faça uma máscara escura desaparecer até transparente sobre uma foto e muitas vezes dá para ver uma linha onde a transição começa, porque o ritmo de mudança salta de zero para a velocidade máxima. Colocar várias paradas intermediárias ao longo de uma curva de easing resolve: a cor começa a mudar devagar, acelera e depois se acomoda. Isso é especialmente útil em sobreposições atrás de texto e em 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%);
}Como posicionar paradas: um método prático
- 1
Escolha a cor que lidera
Dê a ela de 50 a 70 por cento da linha. É ela que define o clima.
- 2
Coloque a mudança onde o olho deve ir
Ponha a mudança de cor mais rápida perto do ponto focal, não no meio por padrão.
- 3
Use dicas antes de adicionar cores
Se uma mistura parece estranha, tente mover o ponto médio primeiro. Cores extras adicionam complexidade.
- 4
Confira os pontos médios
Olhe a cor na metade de cada par. Se estiver cinza, adicione uma ponte ou misture em OKLCH, como explica interpolação de gradiente.
- 5
Suavize transições longas
Para tudo o que desaparece até transparente ou até uma cor chapada, adicione paradas intermediárias para que não haja emenda.
Evite
- Dar a cada cor a mesma fatia
- Adicionar uma cor nova para resolver cada problema
- Transições lineares até transparente atrás de texto
- Paradas duras onde você queria misturas suaves
Faça
- Uma cor que lidera, as outras chegando tarde
- Dicas de cor para deslocar a mistura
- Paradas suavizadas para máscaras e transições
- Paradas duras só para listras e faixas
Se você quer ver as paradas na forma mais simples, gradientes lineares no CSS percorre a sintaxe completa, e tipos de gradiente mostra como as paradas se comportam em gradientes radiais e cônicos. No Gradiently, um Mark cuida da própria mistura e da luz em qualquer tamanho, então você pode criar na hora e gastar o tempo com o texto.
Perguntas frequentes
O que é uma parada de cor do gradiente?
Um ponto ao longo do gradiente onde uma cor específica é atingida, escrito no CSS como uma cor com posição opcional, como #7c3aed 40%.
O que acontece se eu não der posição às paradas?
O navegador as distribui por igual de 0 a 100 por cento. Três cores caem em 0, 50 e 100 por cento.
O que é uma dica de cor num gradiente CSS?
Uma porcentagem sozinha entre duas paradas, como #4c1d95, 25%, #f9a8d4. Ela move o ponto médio da mistura sem adicionar uma cor.
Como fazer uma linha dura num gradiente CSS?
Dê a duas paradas a mesma posição, por exemplo #0f172a 50%, #f8fafc 50%, ou use a sintaxe de posição dupla #0f172a 0 50%, #f8fafc 50% 100%.
Como fazer um gradiente desaparecer suavemente até transparente?
Adicione várias paradas intermediárias cuja opacidade siga uma curva de entrada e saída suaves. Uma transição simples de duas paradas muitas vezes mostra uma linha onde começa.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil