# Paradas de cor do gradiente: onde colocar cada cor [Canonical HTML page](https://gradiently.design/pt-br/guide/gradient-stops) Dois gradientes com cores idênticas podem não ter nada a ver um com o outro. A diferença está em onde ficam as paradas e em como a mistura viaja entre elas. É a parte do gradiente que quase ninguém mexe. ## The short version - 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. **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](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient). | Você escreve | O que acontece | | --- | --- | | `#1e3a8a, #f472b6` | Duas paradas em 0% e 100% | | `#1e3a8a 20%, #f472b6 80%` | Marinho sólido até 20%, mistura, rosa sólido depois de 80% | | `#1e3a8a, 30%, #f472b6` | Uma dica de cor: o ponto médio vai para 30% | | `#1e3a8a 50%, #f472b6 50%` | Uma borda dura no centro, sem mistura | | `#1e3a8a 0 40%, #f472b6 40% 100%` | Posição dupla: duas faixas sólidas | | `#1e3a8a 10px, #f472b6 200px` | Medidas funcionam tão bem quanto porcentagens | Sintaxe das paradas no CSS. As mesmas ideias valem no Figma, no Photoshop e em qualquer editor de gradiente, só que com controles deslizantes. ## 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. - Igual: 0, 50, 100: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 50%, #be123c 100%)` - Com peso: azul lidera: `linear-gradient(180deg, #0c4a6e 0%, #0e7490 58%, #f59e0b 84%, #be123c 100%)` - Com peso: topo quente: `linear-gradient(180deg, #0c4a6e 0%, #f59e0b 22%, #be123c 40%, #4c0519 100%)` Uma paleta, três posicionamentos. As versões com peso parecem um céu em dois momentos diferentes; a igual parece gerada. ## 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. - Sem dica, ponto médio 50%: `linear-gradient(90deg, #4c1d95, #f9a8d4)` - Dica em 25%: `linear-gradient(90deg, #4c1d95, 25%, #f9a8d4)` - Dica em 75%: `linear-gradient(90deg, #4c1d95, 75%, #f9a8d4)` O mesmo violeta a rosa. Mover a dica faz uma cor dominar sem editar nenhuma das duas. ## 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](https://gradiently.design/pt-br/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%)` Paradas duras em ação. Nenhuma mistura, só bordas. ## 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](https://gradiently.design/pt-br/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%); } ``` As duas máscaras terminam com a mesma intensidade. A suavizada não tem linha onde começa. > **A mesma ideia em movimento** Paradas suavizadas são a versão em gradiente de uma curva de easing na animação. [Easing](https://gradiently.design/pt-br/guide/easing) explica por que entrada e saída suaves parecem naturais, e o mesmo raciocínio vale aqui. ## 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](https://gradiently.design/pt-br/guide/gradient-interpolation). 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](https://gradiently.design/pt-br/guide/css-linear-gradient) percorre a sintaxe completa, e [tipos de gradiente](https://gradiently.design/pt-br/guide/types-of-gradients) 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. ## FAQ ### 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.