# Gradientes pôr do sol: paletas de laranja, coral e crepúsculo

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

A maioria dos gradientes de pôr do sol erra no mesmo lugar: o meio, onde o azul encontra o laranja e vira cinza. Um céu de verdade nunca faz isso. Aqui está a ordem que a natureza usa e dez paletas construídas sobre ela.

## The short version

- Um gradiente pôr do sol mistura cores quentes, como dourado, laranja e coral, com rosa, violeta e um azul profundo de fim de tarde.
- Em um pôr do sol real, o céu vai do amarelo e do laranja no horizonte, passando pelo vermelho e pelo rosa, até o violeta e o azul no alto.
- Misturar o azul direto com o laranja pula os rosas e violetas do caminho e vira cinza no meio.
- Esmaecer o laranja direto para o preto vira marrom, então gradientes de crepúsculo ficam melhores escurecendo por ameixa ou índigo.
- Coloque o texto na parte superior, mais escura, de um gradiente pôr do sol, onde o contraste com letras brancas é maior.

Um **gradiente pôr do sol** mistura cores quentes, dourado, laranja e coral, com rosa, violeta e um azul profundo de fim de tarde. É um dos gradientes mais queridos do design, porque todo mundo reconhece e quase todo mundo gosta. É também um dos mais fáceis de errar. O segredo é seguir a ordem que o céu realmente usa: quente e brilhante no horizonte, esfriando por rosa e violeta conforme você olha para cima. Pule essas cores do meio e o gradiente vira cinza.

## A ordem natural das cores do pôr do sol

Quando o sol está baixo, a luz atravessa muito mais atmosfera para chegar até você. No caminho, o ar espalha a luz azul para fora do feixe direto, então a luz perto do sol chega amarela, laranja e vermelha. Mais alto no céu, longe do sol, sobra mais azul. O resultado é uma faixa de cores empilhadas do horizonte para cima.

A ordem completa do pôr do sol: `linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%)`

Do azul profundo no alto, passando por violeta, rosa e laranja, até o dourado no horizonte. Cada etapa é vizinha da seguinte, então nada vira cinza.

| Altura no céu | Cor | Código de exemplo |
| --- | --- | --- |
| No alto | Azul profundo a índigo | `#1e3a8a` |
| Céu superior | Violeta a malva | `#6d28d9` |
| Céu médio | Rosa a magenta | `#db2777` |
| Céu baixo | Laranja a coral | `#f97316` |
| Horizonte | Dourado a amarelo-claro | `#fcd34d` |

As faixas de um pôr do sol limpo. Céus reais variam com nuvens, névoa e estação, mas a ordem se mantém.

## Paletas de gradiente pôr do sol, com códigos

Estas dez paletas seguem a ordem do céu, de cima para baixo. Algumas usam a gama inteira; outras pegam só o lado quente ou só o crepúsculo.

- Crepúsculo coral: `linear-gradient(180deg, #2e2a5a 0%, #8e4a7e 40%, #f07167 75%, #fed9b7 100%)`
- Fim de tarde no deserto: `linear-gradient(180deg, #5b3a6e 0%, #c0587e 35%, #f28c5b 70%, #f9d29d 100%)`
- Hora azul: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 45%, #6b5b95 75%, #f4a28c 100%)`
- Arrebol: `linear-gradient(180deg, #111827 0%, #3b1f4a 40%, #b1455f 75%, #f29e6d 100%)`
- Tropical, só quentes: `linear-gradient(180deg, #ff6f61 0%, #ff9966 55%, #ffd194 100%)`
- Névoa pêssego: `linear-gradient(180deg, #fbc2c2 0%, #fcd5b5 55%, #fef3c7 100%)`
- Mediterrâneo: `linear-gradient(180deg, #4a6fa5 0%, #c38fb8 45%, #f6a57f 75%, #ffe0a3 100%)`
- Synthwave: `linear-gradient(180deg, #2b1055 0%, #d53a9d 55%, #ffb86c 100%)`
- Sol no horizonte: `radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%)`
- Brasa: `linear-gradient(180deg, #7c2d12 0%, #c2410c 40%, #f59e0b 80%, #fde68a 100%)`

Dez gradientes pôr do sol. O radial coloca o próprio sol na borda inferior do quadro.

O synthwave é o primo estilizado e neon do original; [cores vaporwave](https://gradiently.design/pt-br/guide/vaporwave-colors) e [gradientes retrô](https://gradiently.design/pt-br/guide/retro-gradients) levam essa direção mais longe.

## Por que gradientes pôr do sol ficam turvos e como corrigir

Há dois erros clássicos. O primeiro é unir azul e laranja diretamente. Eles são quase opostos no círculo cromático, e uma mistura direta entre os dois dá cinza no meio. O céu nunca faz isso, porque passa por violeta e rosa. O segundo é esmaecer o laranja para o preto em busca de um clima mais escuro. Laranja escuro é marrom, então o gradiente parece ferrugem ou lama, e não fim de tarde.

- Azul direto ao laranja: meio cinza: `linear-gradient(180deg, #1d4ed8 0%, #f97316 100%)`
- Por violeta e rosa: limpo: `linear-gradient(180deg, #1d4ed8 0%, #7c3aed 30%, #db2777 60%, #f97316 100%)`
- Preto a laranja: marrom: `linear-gradient(180deg, #0a0a0a 0%, #f97316 100%)`
- Índigo por ameixa: crepúsculo: `linear-gradient(180deg, #1b1b3a 0%, #6d2e6b 45%, #f97316 100%)`

Dois pores do sol turvos e suas correções. As duas correções acrescentam as cores pelas quais o próprio céu passa.

Se você quer menos paradas, misturar em OKLCH ajuda: as cores continuam saturadas no meio da transição. Veja [gradientes OKLCH em CSS](https://gradiently.design/pt-br/guide/css-gradient-oklch) e, para a teoria, [gradientes turvos](https://gradiently.design/pt-br/guide/muddy-gradients).

## Onde os gradientes pôr do sol funcionam

O pôr do sol carrega um sentimento claro: o fim do dia, calor, um pouco de nostalgia. Isso o torna natural para alguns trabalhos e estranho para outros. Um pôr do sol vivo, com a gama completa, combina com eventos de verão, viagens, música e hotelaria. Uma versão crepuscular, quase toda violeta, combina com lançamentos noturnos, podcasts e tudo o que é reflexivo. Uma versão só quente, de dourado a coral, combina com comida, bebida e momentos de promoção.

- **Pôsteres de eventos e convites:** as cores dizem noite antes da data.
- **Viagens e hotelaria:** a hora dourada é a luz mais fotografada que existe, e as pessoas a reconhecem.
- **Capas de música e playlists:** paletas de crepúsculo são cinematográficas e um pouco melancólicas.
- **Campanhas sazonais:** um pôr do sol que esfria ao longo do outono marca a estação sem uma arte nova.

Onde eles se encaixam menos: finanças sérias, saúde e tudo o que deve parecer neutro. O calor passa a ideia de lazer. As cores do pôr do sol também ficam firmes no lado quente do círculo; [cores quentes e frias](https://gradiently.design/pt-br/guide/warm-and-cool-colors) explica como a temperatura muda o clima de um design.

## Como criar seu próprio gradiente pôr do sol

1. **Escolha quanto do céu você quer** A gama inteira para drama, só o lado quente para energia ou só o crepúsculo para calma.
2. **Coloque o quente embaixo** Dourado e laranja ficam perto do horizonte. Pores do sol de cabeça para baixo podem funcionar, mas parecem estilizados.
3. **Nunca pule um vizinho** Entre azul e laranja, inclua violeta e rosa. Entre laranja e escuro, inclua ameixa ou índigo.
4. **Dê menos espaço à faixa quente** Nos céus reais, as cores mais brilhantes ficam coladas no horizonte. Mantê-las no quarto inferior deixa o gradiente natural.
5. **Adicione grão** Céus longos e lisos formam faixas com facilidade. Uma camada fina de ruído mantém a transição suave depois da compressão.

## Texto sobre um gradiente pôr do sol

O topo de um gradiente pôr do sol é escuro e frio, perfeito para texto branco. A base é clara e quente, perfeita para texto escuro ou para nada. O meio, onde o rosa encontra o laranja, é o lugar mais difícil para os dois. Coloque os títulos no alto e os detalhes embaixo, ou mantenha as palavras em uma única faixa calma.

Um pôster vertical de evento com um título perto do topo de um gradiente quente de fim de tarde

Título no alto, no céu mais escuro, e detalhes mais abaixo.

Um story vertical de promoção com um título acima de um brilho quente na base

Um story em que o brilho quente fica abaixo das palavras.

```css
.hero {
  background-color: #1b1b3a;
  background-image: radial-gradient(circle at 50% 100%, #fff3b0 0%, #ffb347 18%, #ff6f61 40%, #6d2e6b 75%, #1b1b3a 100%);
  color: #ffffff;
}
.hero h1 {
  /* keep the headline in the dark upper half */
  margin-top: 12vh;
}
```

A paleta Sol no horizonte como hero de página, com o título no céu escuro acima do brilho.

Para mais paletas de céu e paisagem, veja [paletas de cores da natureza](https://gradiently.design/pt-br/guide/nature-color-palettes) e, para versões puxadas para o rosa, [gradientes rosa](https://gradiently.design/pt-br/guide/pink-gradient).

## FAQ

### Quais cores formam um gradiente pôr do sol?

Em geral, dourado e laranja no horizonte, depois coral, rosa e magenta, depois violeta e um azul profundo no alto.

### Por que meu gradiente pôr do sol fica turvo?

Normalmente porque mistura o azul direto com o laranja, ou o laranja direto com o preto. Adicione violeta e rosa entre o azul e o laranja, e escureça por ameixa ou índigo em vez de preto.

### Qual é o código CSS de um gradiente pôr do sol?

Para um pôr do sol completo, experimente linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%). Cada paleta desta página pode ser copiada como CSS.

### Onde colocar o texto em um gradiente pôr do sol?

Na parte superior, mais escura e fria, para texto branco, ou na faixa clara e quente para texto escuro. Evite o meio, onde o rosa encontra o laranja.