# 60 combinações de cores para gradiente que funcionam, com códigos

[Canonical HTML page](https://gradiently.design/pt-br/guide/gradient-color-combinations)

Sessenta gradientes, organizados pela sensação que você quer e não pelo matiz. Cada um é um código CSS vivo para copiar, e cada grupo explica a regra que faz suas misturas funcionarem.

## The short version

- As melhores combinações de cores para gradiente usam matizes vizinhos, que se misturam com limpeza, ou ligam matizes distantes por uma cor intermediária escolhida.
- Gradientes calmos mantêm luminosidade e matiz próximos; gradientes vibrantes aumentam a saturação e a distância entre os matizes.
- Gradientes escuros funcionam melhor como um fundo quase preto com uma cor iluminada, e os pastéis funcionam melhor como vizinhos claros com uma tinta escura para o texto.
- Escolher o gradiente primeiro pelo clima e depois pelo matiz dá resultados mais consistentes do que escolher uma cor de que você gosta por vez.
- Qualquer combinação daqui pode ficar mais distintiva com uma terceira cor, outro ângulo ou uma camada de grão.

As melhores **combinações de cores para gradiente** seguem uma de duas regras: usam matizes que ficam lado a lado no círculo cromático, para a mistura continuar limpa, ou ligam matizes distantes por uma cor intermediária escolhida, para que nunca vire cinza. Abaixo estão 60 combinações que seguem essas regras, agrupadas por clima: calmo, vibrante, quente, frio, escuro e pastel. Copie qualquer amostra como CSS e leia a nota sob cada grupo para entender por que funcionam, e assim criar as suas.

Tudo aqui é CSS simples com cores hex, então funciona em qualquer navegador, e os mesmos códigos podem ser digitados em qualquer ferramenta de design. Se algum termo for novo, [o que é um gradiente](https://gradiently.design/pt-br/guide/what-is-a-gradient) explica as paradas e os ângulos.

## Combinações de gradiente calmas

Gradientes calmos mantêm as cores próximas tanto no matiz quanto na luminosidade. Nada salta, então o olho descansa. Servem de fundo para leitura, marcas de bem-estar, portfólios e tudo que deva parecer tranquilo. Sálvia e pedra, por exemplo, anda só uma pequena distância pelo círculo e perde um pouco de luminosidade no caminho, o que lembra a sombra em uma parede e não um efeito de cor.

- Vidro do mar: `linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%)`
- Neblina da manhã: `linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%)`
- Sálvia e pedra: `linear-gradient(135deg, #e7e5d8 0%, #b5c4a8 50%, #7d9275 100%)`
- Entardecer lavanda: `linear-gradient(160deg, #ede9fe 0%, #c4b5fd 55%, #a78bfa 100%)`
- Água parada: `linear-gradient(180deg, #dbeafe 0%, #93c5fd 60%, #60a5fa 100%)`
- Banco de areia: `linear-gradient(135deg, #fdf6e3 0%, #f3e1c1 50%, #d9b99b 100%)`
- Eucalipto: `linear-gradient(135deg, #d8e8e0 0%, #9fc2b0 50%, #5f8f7b 100%)`
- Azul ardósia: `linear-gradient(160deg, #cbd5e1 0%, #94a3b8 55%, #64748b 100%)`
- Leite de aveia: `linear-gradient(180deg, #faf7f2 0%, #eee4d4 100%)`
- Pedra da lua: `linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #c7d2fe 100%)`

Calmo: uma só família de matiz, passos pequenos de luminosidade. Levam texto escuro com facilidade.

## Combinações de gradiente vibrantes

Gradientes vibrantes usam cores saturadas e mais distância pelo círculo. Chamam atenção em um feed lotado, em um banner de promoção ou em uma página de lançamento. O truque é escolher pares cuja mistura direta continue viva. Magenta para âmbar passa pelo coral; cobalto para coral passa pelo roxo. Nenhum chega perto do cinza, e por isso parecem vívidos de ponta a ponta.

- Violeta elétrico: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%)`
- Cítrico intenso: `linear-gradient(135deg, #f97316 0%, #facc15 100%)`
- Ponche tropical: `linear-gradient(135deg, #ec4899 0%, #f97316 100%)`
- Sinal: `linear-gradient(90deg, #dc2626 0%, #f97316 50%, #facc15 100%)`
- Clarão ultramarino: `linear-gradient(135deg, #1d4ed8 0%, #06b6d4 100%)`
- Magenta para âmbar: `linear-gradient(135deg, #c026d3 0%, #f59e0b 100%)`
- Selva: `linear-gradient(135deg, #15803d 0%, #84cc16 100%)`
- Cobalto e coral: `linear-gradient(135deg, #2563eb 0%, #f43f5e 100%)`
- Refrigerante de uva: `linear-gradient(135deg, #7e22ce 0%, #e879f9 100%)`
- Limão e turquesa: `linear-gradient(135deg, #0d9488 0%, #a3e635 100%)`

Vibrante: alta saturação, pares escolhidos para o ponto médio continuar vivo. Use texto branco na ponta mais escura.

## Combinações de gradiente quentes

Gradientes quentes vivem entre o vermelho e o amarelo e parecem ensolarados, apetitosos e humanos. Combinam com comida, hospitalidade, estilo de vida e tudo que seja pessoal. A maioria destes acrescenta uma ponta mais escura e avermelhada para a mistura ter peso: Hora dourada vai do mel claro ao âmbar queimado como a luz do fim de tarde desce por uma parede. Para a psicologia da temperatura, veja [cores quentes e frias](https://gradiently.design/pt-br/guide/warm-and-cool-colors).

- Hora dourada: `linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%)`
- Terracota: `linear-gradient(135deg, #fed7aa 0%, #ea580c 60%, #9a3412 100%)`
- Sorbet de pêssego: `linear-gradient(135deg, #ffedd5 0%, #fdba74 50%, #fb7185 100%)`
- Brasa: `linear-gradient(180deg, #fbbf24 0%, #dc2626 55%, #450a0a 100%)`
- Rosa do deserto: `linear-gradient(135deg, #f5d0c5 0%, #d4938b 50%, #a15c5c 100%)`
- Mel: `linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #d97706 100%)`
- Canela: `linear-gradient(135deg, #f5d0a9 0%, #c2703d 55%, #7c3a1d 100%)`
- Faixa de pôr do sol: `linear-gradient(180deg, #fde047 0%, #fb923c 35%, #e11d48 70%, #7e22ce 100%)`
- Damasco e ameixa: `linear-gradient(135deg, #fdba74 0%, #9d174d 100%)`
- Tijolo e ouro: `linear-gradient(135deg, #991b1b 0%, #f59e0b 100%)`

Quente: vizinhos entre vermelho, laranja e amarelo, em geral com uma ponta mais escura para dar profundidade. Para mais, veja os [gradientes de pôr do sol](https://gradiently.design/pt-br/guide/sunset-gradient).

## Combinações de gradiente frias

Gradientes frios ficam entre o verde e o violeta e parecem limpos, calmos e precisos. São o lar natural de tecnologia, saúde, finanças e água. O azul é a âncora da maioria deles, e por isso passam confiança, e também por isso um gradiente frio precisa de um detalhe distintivo, como uma ponta violeta ou uma virada para o turquesa, para não parecer com todo banco. Mais azuis estão reunidos em [gradientes azuis](https://gradiently.design/pt-br/guide/blue-gradient).

- Geleira: `linear-gradient(180deg, #ecfeff 0%, #a5f3fc 50%, #22d3ee 100%)`
- Laguna profunda: `linear-gradient(135deg, #06b6d4 0%, #0e7490 55%, #164e63 100%)`
- Nórdico: `linear-gradient(135deg, #e2e8f0 0%, #93c5fd 50%, #3b82f6 100%)`
- Noite índigo: `linear-gradient(180deg, #6366f1 0%, #312e81 100%)`
- Menta ao céu: `linear-gradient(135deg, #6ee7b7 0%, #38bdf8 100%)`
- Pervinca: `linear-gradient(135deg, #c7d2fe 0%, #818cf8 100%)`
- Turquesa ártico: `linear-gradient(135deg, #99f6e4 0%, #14b8a6 50%, #115e59 100%)`
- Hora azul: `linear-gradient(180deg, #1e3a8a 0%, #6366f1 55%, #c4b5fd 100%)`
- Violeta gelo: `linear-gradient(135deg, #e0e7ff 0%, #a78bfa 100%)`
- Profundeza do oceano: `linear-gradient(180deg, #22d3ee 0%, #1d4ed8 55%, #172554 100%)`

Frio: vizinhos entre verde, turquesa, azul e violeta. Uma leve mudança de matiz os torna menos corporativos.

## Combinações de gradiente escuras

Gradientes escuros são fundos quase pretos com uma cor iluminada subindo deles. Parecem sofisticados, noturnos e cinematográficos, e deixam o texto branco nítido. Mantenha a ponta escura levemente colorida em vez de preto puro, para a mistura ter por onde viajar. Rampas escuras criam faixas com facilidade, então adicione grão antes de publicar; veja [fundos de gradiente escuros](https://gradiently.design/pt-br/guide/dark-gradient-backgrounds).

- Violeta meia-noite: `linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%)`
- Mar profundo: `linear-gradient(180deg, #020617 0%, #0c4a6e 60%, #0e7490 100%)`
- Chão de floresta: `linear-gradient(160deg, #052e16 0%, #14532d 55%, #3f6212 100%)`
- Sangue de boi: `linear-gradient(135deg, #1c0508 0%, #7f1d1d 60%, #b91c1c 100%)`
- Grafite: `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #404040 100%)`
- Nanquim e brasa: `linear-gradient(160deg, #0c0a09 0%, #292524 60%, #c2410c 100%)`
- Azul petróleo: `linear-gradient(135deg, #021a1f 0%, #0f4c5c 55%, #2a9d8f 100%)`
- Berinjela: `linear-gradient(135deg, #1a0b1f 0%, #4a1942 55%, #86198f 100%)`
- Turquesa noturno: `linear-gradient(180deg, #031716 0%, #0f3d3e 60%, #14b8a6 100%)`
- Cereja escura: `linear-gradient(160deg, #0f0306 0%, #4c0519 55%, #be123c 100%)`

Escuro: um quase preto com tom, um meio profundo e uma cor iluminada na outra ponta.

## Combinações de gradiente pastel

Pastéis são cores claras, de alta luminosidade e com um pouco de saturação. Parecem frescos, suaves e simpáticos, e combinam com beleza, bebês, papelaria e campanhas de primavera. Como são todos muito claros, até pastéis de matizes distantes podem se misturar em um cinza esbranquiçado, então os dois últimos daqui passam por um lilás claro. Use tinta escura para o texto sobre pastéis, e não branco. Há mais em [gradientes pastel](https://gradiently.design/pt-br/guide/pastel-gradients).

- Algodão-doce: `linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 50%, #a5f3fc 100%)`
- Pêssego e lilás: `linear-gradient(135deg, #fed7aa 0%, #ddd6fe 100%)`
- Pistache: `linear-gradient(135deg, #ecfccb 0%, #bbf7d0 100%)`
- Azul-bebê: `linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%)`
- Limão e rubor: `linear-gradient(135deg, #fef9c3 0%, #fecdd3 100%)`
- Menta e creme: `linear-gradient(135deg, #d1fae5 0%, #fef3c7 100%)`
- Violeta pó: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 50%, #c4b5fd 100%)`
- Sorvete de frutas: `linear-gradient(90deg, #fecaca 0%, #fed7aa 50%, #fef08a 100%)`
- Espuma do mar e rosa: `linear-gradient(135deg, #ccfbf1 0%, #e9d5ff 50%, #fbcfe8 100%)`
- Céu da aurora: `linear-gradient(180deg, #bae6fd 0%, #e9d5ff 50%, #fde2c4 100%)`

Pastel: vizinhos claros, ou pastéis distantes ligados por um lilás para o meio continuar com tom.

## Como usar estes códigos de gradiente

Cada código é um valor `background` completo de CSS. Cole em qualquer elemento ou leve as cores hex e as posições das paradas para uma ferramenta de design. Na web, defina antes uma cor sólida de reserva, tirada da parada mais escura ou mais importante.

```css
.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}
```

Violeta meia-noite em um card, com cor de reserva e texto branco.

## Como criar sua própria combinação

1. **Escolha o clima primeiro** Decida entre calmo ou vibrante, quente ou frio, escuro ou claro antes de qualquer cor. Isso reduz as opções a um dos grupos acima.
2. **Escolha uma cor âncora** Em geral a cor da sua marca ou a cor do que você vende. Veja [como escolher as cores da marca](https://gradiently.design/pt-br/guide/how-to-choose-brand-colors).
3. **Adicione uma vizinha** Ande de 30 a 60 graus pelo círculo cromático para ter uma segunda cor limpa. Mude um pouco a luminosidade também, para dar profundidade.
4. **Ligue tudo o que for distante** Se você quer um matiz bem afastado, ponha uma cor intermediária viva entre eles para a mistura não virar cinza. Veja [gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients).
5. **Faça dela sua** Mude o ângulo, tire uma parada dos 50%, adicione uma terceira cor ou uma camada de grão. Pequenas mudanças evitam que uma combinação pareça um preset.

Um código popular é um bom começo, mas milhares de outros designs começam nele também. Se você quer uma identidade em gradiente que ninguém mais tenha, pode combinar uma imagem de que gosta com sua paleta e os Marks mais próximos, ou criar novos parecidos com ela.

## FAQ

### Quais cores combinam bem em um gradiente?

Cores vizinhas no círculo cromático, como azul e violeta ou laranja e rosa, sempre se misturam com limpeza. Cores distantes funcionam quando uma cor intermediária viva liga as duas.

### Qual é a combinação de gradiente mais popular?

Violeta para rosa e azul para ciano estão entre as mais usadas. Essa popularidade também é o motivo de raramente parecerem distintivas.

### Quantas cores um gradiente deve ter?

Duas é o mais simples, três dá profundidade e controle sobre o ponto médio, e mais de cinco é difícil de manter limpo.

### Que cor de texto funciona sobre um gradiente?

Branco ou quase branco sobre gradientes escuros e vibrantes, e tinta escura sobre os pastéis e os calmos. Confira o contraste no ponto mais claro atrás do texto.

### Posso usar estes códigos de gradiente no Figma ou no Canva?

Sim. Copie as cores hex e as posições das paradas para o preenchimento em gradiente da ferramenta e ajuste o ângulo.