# Gradientes de duas cores: 30 pares que funcionam sempre [Canonical HTML page](https://gradiently.design/pt-pt/guide/two-color-gradients) Duas cores, uma direção, nada que possa correr mal. Quase. Eis as duas regras que decidem se um par funciona, e trinta pares que passam nas duas, prontos a copiar. ## The short version - Um gradiente de duas cores mistura uma cor noutra, e é o gradiente mais simples de desenhar, recolorir e manter coerente. - Se um par funciona depende sobretudo da distância de tom: tons vizinhos misturam-se sempre de forma limpa, e tons opostos ficam cinzentos no meio. - Uma diferença de luminosidade entre as duas cores dá ao gradiente direção e profundidade. - Duas cores da mesma família de tom, uma clara e outra escura, fazem o gradiente mais versátil, porque o texto funciona numa das pontas. - Como os gradientes de duas cores são tão comuns, é uma pequena mudança, como um ângulo invulgar, um ponto médio deslocado ou uma camada de grão, que torna um deles reconhecível. Um **gradiente de duas cores** é uma mistura de uma cor para outra, e é o gradiente mais seguro que podes fazer: duas cores são fáceis de escolher, fáceis de recolorir e fáceis de manter coerentes. Se um par funciona resume-se a duas coisas: a distância entre os tons no círculo cromático e a diferença de luminosidade entre eles. Acerta nisso e quase quaisquer duas cores dão um bom gradiente. Abaixo estão as regras e depois trinta pares que as seguem. ## Regra 1: atenção à distância de tom A distância de tom é o afastamento entre duas cores no círculo cromático, medido em graus. Prevê o que acontece no meio da mistura, que é onde os gradientes de duas cores acertam ou falham. | Distância de tom | O que acontece no meio | Veredicto | | --- | --- | --- | | 0 a 60 graus | Uma cor intermédia limpa, como o violeta entre o azul e o rosa | Sempre seguro | | 60 a 120 graus | Normalmente uma nova cor nítida, às vezes ligeiramente baça | Seguro; verifica o meio | | 120 a 150 graus | Muitas vezes um meio mais suave e acinzentado | Testa com cuidado | | 150 a 180 graus | Cinzento ou castanho no meio quando misturado da forma predefinida | Precisa de uma cor ponte ou de OKLCH | Quanto maior a distância, mais provável é que o ponto médio perca cor. A explicação completa está em [gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients). As distâncias da primeira linha são [cores análogas](https://gradiently.design/pt-pt/guide/analogous-colors). As distâncias da última linha são [cores complementares](https://gradiently.design/pt-pt/guide/complementary-colors), que ficam impressionantes lado a lado mas precisam de ajuda quando misturadas. ## Regra 2: dá-lhe uma diferença de luminosidade Duas cores com a mesma luminosidade fazem um gradiente que parece plano, como se não fosse a lado nenhum. Uma diferença clara de luminosidade dá direção à mistura, como luz a cair de um dos lados. Também traz uma vantagem prática: o texto pode ficar na ponta mais escura em branco, ou na ponta mais clara numa tinta escura. ### Parece plano - Duas cores de tom médio com a mesma luminosidade - Duas cores totalmente saturadas sem ponta escura - Nenhum sítio óbvio para o texto ### Parece iluminado - Uma cor mais clara e outra mais escura - Uma cor saturada junto de uma vizinha mais profunda - Uma ponta clara e uma ponta escura bem definidas para o texto ## Pares de tons próximos Estes pares estão a cerca de 60 graus um do outro, no máximo. É impossível ficarem turvos e ficam bem em quase tudo, de botões a fundos de ecrã inteiro. O Mirtilo e a Maré, por exemplo, são ambos azul a caminhar para o violeta, o que se lê como uma só cor a apanhar a 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%)` - Relva 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%)` - Clementina: `linear-gradient(135deg, #fb923c 0%, #facc15 100%)` - Musgo e verde-azulado: `linear-gradient(135deg, #65a30d 0%, #0f766e 100%)` Pares de tons próximos: vizinhos no círculo, por isso o meio é sempre uma cor limpa. ## Pares de claro para escuro Estes pares mantêm uma família de tom e mudam a luminosidade de pálido para profundo. São os gradientes de duas cores mais versáteis: calmos o suficiente para uma página inteira, e com uma ponta escura pronta para texto branco. Também dão excelentes gradientes de marca, porque prolongam uma única cor da marca em vez de acrescentarem uma nova. Vê [esquemas de cores monocromáticos](https://gradiently.design/pt-pt/guide/monochromatic-color-scheme) para a teoria. - Ganga: `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 de claro para escuro: uma família de tom, uma grande mudança de luminosidade. Tinta escura em cima, texto branco em baixo. ## Pares de contraste que se mantêm limpos Estes pares estão mais afastados, entre cerca de 90 e 150 graus, mas cada um tem um ponto médio vivo quando misturado da forma predefinida. O pêssego e o violeta passam pelo malva, o ciano e o magenta pelo pervinca, o laranja e o magenta pelo rosa choque. Têm mais energia do que os pares próximos e servem bem lançamentos, música e tudo o que precise de 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 tom, mas ainda um meio vivo. Verifica o contraste do texto nas duas pontas. ## Deslocar o ponto médio Por predefinição, um gradiente de duas cores é metade e metade. O CSS deixa-te mover o ponto onde as duas cores estão misturadas por igual com uma indicação de cor: uma percentagem solta entre as paragens. Empurra-a 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 indicação de cor desloca o ponto médio sem acrescentar uma cor. É uma das formas mais rápidas de fazer um par comum parecer menos predefinido. ## Onde pôr o texto num gradiente de duas cores Um gradiente de duas cores traz um layout incorporado: uma ponta é mais clara e a outra mais escura. Põe as palavras na ponta que mais contrasta com a cor do teu texto e deixa a outra ponta levar a cor. Para texto branco, é a ponta mais escura; para tinta escura, a mais clara. Nunca centres texto pequeno sobre o ponto médio de um par de claro para escuro, porque o contraste muda ao longo da linha. [Texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) trata das verificações em detalhe. Uma publicação vertical com um título curto colocado na ponta mais calma de um fundo com gradiente As palavras na ponta calma da mistura, a cor na outra: o layout mais simples que um gradiente oferece. ## Tornar um gradiente de duas cores teu Os gradientes de duas cores são populares precisamente por serem seguros, por isso os pares populares estão em todo o lado. Para tornar um deles reconhecível, muda algo que as pessoas notam sem pensar: um ângulo mais inclinado ou invulgar (vê [ângulo do gradiente](https://gradiently.design/pt-pt/guide/gradient-angle)), um ponto médio deslocado, um grão fino, ou uma terceira cor usada só numa das margens. Quando estiveres pronto para ir além de duas, as [60 combinações de cores para gradientes](https://gradiently.design/pt-pt/guide/gradient-color-combinations) estão agrupadas por ambiente. Se já sabes as duas cores que queres, podes escrevê-las na pesquisa do Mercado, como “azul e violeta”, e criar com os Marks construídos à volta delas. ## FAQ ### Que duas cores fazem o melhor gradiente? Cores a cerca de 60 graus uma da outra no círculo cromático, no máximo, com uma diferença clara de luminosidade, fazem os gradientes de duas cores mais fiáveis. ### Porque é que o meu gradiente de duas cores fica cinzento no meio? As cores estão quase opostas no círculo cromático. Junta uma cor ponte viva no meio ou mistura em OKLCH. ### Um gradiente de duas cores é melhor do que um de três? Duas cores são mais simples e mais seguras. Três dão mais profundidade e deixam-te controlar o ponto médio, mas é mais fácil errar. ### Como mudo o sítio onde duas cores se encontram num gradiente CSS? Junta uma indicação de cor, uma percentagem solta entre as duas paragens, como `linear-gradient(#3b82f6, 25%, #8b5cf6)`. ### Onde deve ficar o texto num gradiente de duas cores? Na ponta com mais contraste para a cor do teu texto: branco na ponta mais escura, tinta escura na ponta mais clara.