# Gradientes de duas cores: 30 pares que sempre funcionam [Canonical HTML page](https://gradiently.design/pt-br/guide/two-color-gradients) Duas cores, uma direção, nada para dar errado. Quase nada. Veja as duas regras que decidem se um par funciona e trinta pares que passam nas duas, prontos para copiar. ## The short version - Um gradiente de duas cores mistura uma cor na outra e é o gradiente mais simples de criar, trocar de cor e manter consistente. - Se um par funciona depende principalmente da distância de matiz: matizes vizinhos sempre se misturam de forma limpa, e matizes opostos ficam cinza no meio. - Uma diferença de luminosidade entre as duas cores dá direção e profundidade ao gradiente. - Duas cores da mesma família de matiz, uma clara e uma escura, formam o gradiente mais versátil, porque o texto funciona em uma das pontas. - Como gradientes de duas cores são muito comuns, uma pequena mudança, como um ângulo incomum, um ponto médio deslocado ou uma camada de grão, é o que torna um deles reconhecível. Um **degradê de duas cores** é uma transição de uma cor para outra, e é o gradiente mais seguro que existe: duas cores são fáceis de escolher, fáceis de trocar e fáceis de manter consistentes. Se um par funciona depende de duas coisas: a distância entre os matizes no círculo cromático e a diferença de luminosidade entre eles. Acerte essas duas e quase qualquer par de cores vira um bom gradiente. Abaixo estão as regras e depois trinta pares que as seguem. ## Regra 1: observe a distância de matiz A distância de matiz é o quanto duas cores ficam afastadas no círculo cromático, medida em graus. Ela prevê o que acontece no meio da transição, que é onde um gradiente de duas cores dá certo ou errado. | Distância de matiz | O que acontece no meio | Veredito | | --- | --- | --- | | 0 a 60 graus | Uma cor intermediária limpa, como violeta entre azul e rosa | Sempre seguro | | 60 a 120 graus | Geralmente uma cor nova e clara, às vezes um pouco apagada | Seguro; confira o meio | | 120 a 150 graus | Muitas vezes um meio mais suave e acinzentado | Teste com cuidado | | 150 a 180 graus | Cinza ou marrom no meio com a mistura padrão | Precisa de uma cor ponte ou de OKLCH | Quanto maior o intervalo, maior a chance de o ponto médio perder cor. A explicação completa está em [gradientes lamacentos](https://gradiently.design/pt-br/guide/muddy-gradients). As distâncias da primeira linha são [cores análogas](https://gradiently.design/pt-br/guide/analogous-colors). As da última linha são [cores complementares](https://gradiently.design/pt-br/guide/complementary-colors), que ficam marcantes lado a lado mas precisam de ajuda quando misturadas. ## Regra 2: crie uma diferença de luminosidade Duas cores com a mesma luminosidade formam um gradiente que parece chapado, como se não fosse a lugar nenhum. Uma diferença clara de luminosidade dá direção à transição, como luz caindo de um lado. E ainda traz uma vantagem prática: o texto pode ficar na ponta mais escura em branco, ou na ponta mais clara em uma cor escura. ### Parece chapado - Duas cores de meio-tom com a mesma luminosidade - Duas cores totalmente saturadas sem uma ponta escura - Nenhum lugar óbvio para o texto ### Parece iluminado - Uma cor mais clara e uma mais escura - Uma cor saturada junto de uma vizinha mais profunda - Uma ponta clara e uma escura bem definidas para o texto ## Pares de matizes próximos Estes pares ficam a no máximo uns 60 graus um do outro. É impossível deixá-los lamacentos, e ficam bem em quase tudo, de botões a fundos de tela cheia. Mirtilo e Maré, por exemplo, são azuis caminhando para o violeta, o que se lê como uma única cor pegando luz. - Mirtilo: `linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)` - Flamingo: `linear-gradient(135deg, #f472b6 0%, #fb923c 100%)` - Lagoa: `linear-gradient(135deg, #06b6d4 0%, #10b981 100%)` - Calêndula: `linear-gradient(135deg, #fbbf24 0%, #f97316 100%)` - Orquídea: `linear-gradient(135deg, #d946ef 0%, #6366f1 100%)` - Grama cortada: `linear-gradient(135deg, #84cc16 0%, #10b981 100%)` - Pau-rosa: `linear-gradient(135deg, #e11d48 0%, #db2777 100%)` - Maré: `linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)` - Mexerica: `linear-gradient(135deg, #fb923c 0%, #facc15 100%)` - Musgo e verde-azulado: `linear-gradient(135deg, #65a30d 0%, #0f766e 100%)` Pares de matizes próximos: vizinhos no círculo, então o meio é sempre uma cor limpa. ## Pares do claro ao escuro Estes pares mantêm uma família de matiz e mudam a luminosidade do claro ao profundo. São os gradientes de duas cores mais versáteis: calmos o bastante para uma página inteira e com uma ponta escura pronta para texto branco. Também dão ótimos gradientes de marca, porque ampliam uma única cor da marca em vez de acrescentar outra. Veja [esquemas de cores monocromáticos](https://gradiently.design/pt-br/guide/monochromatic-color-scheme) para a teoria. - Jeans: `linear-gradient(180deg, #bfdbfe 0%, #1e3a8a 100%)` - Ameixa: `linear-gradient(180deg, #f5d0fe 0%, #701a75 100%)` - Floresta: `linear-gradient(180deg, #bbf7d0 0%, #14532d 100%)` - Ferrugem: `linear-gradient(180deg, #fed7aa 0%, #9a3412 100%)` - Carvão: `linear-gradient(180deg, #e5e5e5 0%, #262626 100%)` - Vinho: `linear-gradient(180deg, #fecdd3 0%, #881337 100%)` - Verde-azulado profundo: `linear-gradient(180deg, #99f6e4 0%, #134e4a 100%)` - Índigo: `linear-gradient(180deg, #c7d2fe 0%, #312e81 100%)` - Cacau: `linear-gradient(180deg, #e7d3c1 0%, #4a2c1d 100%)` - Âmbar: `linear-gradient(180deg, #fef3c7 0%, #92400e 100%)` Pares do claro ao escuro: uma família de matiz, uma grande mudança de luminosidade. Texto escuro em cima, texto branco embaixo. ## Pares de contraste que continuam limpos Estes pares ficam mais afastados, entre uns 90 e 150 graus, mas cada um tem um ponto médio vivo com a mistura padrão. Pêssego e violeta passam pelo malva, ciano e magenta pela pervinca, laranja e magenta pelo rosa-choque. São mais enérgicos que os pares próximos, bons para lançamentos, música e tudo que precisa se destacar. - Coral e índigo: `linear-gradient(135deg, #fb7185 0%, #4338ca 100%)` - Pêssego e violeta: `linear-gradient(135deg, #fdba74 0%, #7c3aed 100%)` - Lima e azul: `linear-gradient(135deg, #a3e635 0%, #2563eb 100%)` - Rosa e céu: `linear-gradient(135deg, #f472b6 0%, #38bdf8 100%)` - Amarelo e rosa: `linear-gradient(135deg, #fde047 0%, #ec4899 100%)` - Ciano e magenta: `linear-gradient(135deg, #22d3ee 0%, #d946ef 100%)` - Vermelho e violeta: `linear-gradient(135deg, #ef4444 0%, #6d28d9 100%)` - Menta e violeta: `linear-gradient(135deg, #34d399 0%, #8b5cf6 100%)` - Laranja e magenta: `linear-gradient(135deg, #f97316 0%, #c026d3 100%)` - Verde e dourado: `linear-gradient(135deg, #16a34a 0%, #facc15 100%)` Pares de contraste: mais distância de matiz e ainda um meio vivo. Confira o contraste do texto nas duas pontas. ## Como mover o ponto médio Por padrão, um gradiente de duas cores é meio a meio. O CSS permite mover o ponto em que as duas cores se misturam por igual com uma dica de cor: uma porcentagem solta entre as paradas. Empurre para uma das pontas e a outra cor passa a ocupar mais da superfície, sem acrescentar uma terceira cor. ```css /* Even blend: the mix point sits at 50% */ .even { background: linear-gradient(135deg, #3b82f6, #8b5cf6); } /* Colour hint at 25%: violet arrives early and fills most of the box */ .violet { background: linear-gradient(135deg, #3b82f6, 25%, #8b5cf6); } /* Colour hint at 75%: blue holds on for most of the box */ .blue { background: linear-gradient(135deg, #3b82f6, 75%, #8b5cf6); } ``` Uma dica de cor move o ponto médio sem acrescentar cor. É um dos jeitos mais rápidos de fazer um par comum parecer menos padrão. ## Onde colocar o texto em um gradiente de duas cores Um gradiente de duas cores já vem com um layout: uma ponta é mais clara e a outra mais escura. Coloque as palavras na ponta que mais contrasta com a cor do seu texto e deixe a outra ponta carregar a cor. Para texto branco, é a ponta mais escura; para texto escuro, a mais clara. Nunca centralize texto pequeno sobre o ponto médio de um par do claro ao escuro, porque o contraste muda ao longo da linha. [Texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) mostra as verificações em detalhe. Um post vertical com um título curto na ponta mais calma de um fundo gradiente Palavras na ponta calma da transição, cor na outra: o layout mais simples que um gradiente oferece. ## Como deixar um gradiente de duas cores com a sua cara Os gradientes de duas cores são populares justamente por serem seguros, então os pares populares estão em todo lugar. Para tornar um reconhecível, mude algo que as pessoas notam sem pensar: um ângulo mais inclinado ou incomum (veja [ângulo do gradiente](https://gradiently.design/pt-br/guide/gradient-angle)), um ponto médio deslocado, um grão fino ou uma terceira cor usada só em uma borda. Quando quiser ir além de duas, as [60 combinações de cores para gradiente](https://gradiently.design/pt-br/guide/gradient-color-combinations) estão agrupadas por clima. Se você já sabe as duas cores que quer, pode digitá-las na busca do Mercado, como “azul e violeta”, e criar com os Marks construídos em torno delas. ## FAQ ### Quais duas cores fazem o melhor gradiente? Cores a até uns 60 graus uma da outra no círculo cromático, com uma diferença clara de luminosidade, formam os gradientes de duas cores mais confiáveis. ### Por que meu gradiente de duas cores fica cinza no meio? As cores são quase opostas no círculo cromático. Acrescente uma cor ponte viva no meio ou faça a mistura em OKLCH. ### Um gradiente de duas cores é melhor que um de três? Duas cores são mais simples e seguras. Três dão mais profundidade e permitem controlar o ponto médio, mas é mais fácil errar. ### Como mudo onde as duas cores se encontram em um gradiente CSS? Acrescente uma dica de cor, uma porcentagem solta entre as duas paradas, como `linear-gradient(#3b82f6, 25%, #8b5cf6)`. ### Onde colocar o texto em um gradiente de duas cores? Na ponta com mais contraste para a cor do seu texto: branco na ponta mais escura, texto escuro na ponta mais clara.