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

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

A maioria dos gradientes de pôr do sol falha no mesmo sítio: o meio, onde o azul encontra o laranja e fica cinzento. Um céu real nunca faz isso. Aqui tens 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 o dourado, o laranja e o coral, com o rosa, o violeta e um azul profundo de fim de tarde.
- Num pôr do sol real, o céu vai do amarelo e do laranja no horizonte ao violeta e ao azul no alto, passando pelo vermelho e pelo rosa.
- Misturar o azul diretamente com o laranja salta os rosas e os violetas intermédios e fica cinzento no meio.
- Esbater o laranja diretamente para o preto dá castanho, por isso os gradientes de crepúsculo ficam melhor a escurecer através do ameixa ou do índigo.
- Põe o texto na parte superior, mais escura, de um gradiente pôr do sol, onde o contraste com letra branca é maior.

Um **gradiente pôr do sol** mistura cores quentes, dourado, laranja e coral, com o rosa, o violeta e um azul profundo de fim de tarde. É um dos gradientes mais queridos do design, porque toda a gente o reconhece e quase toda a gente gosta dele. É também um dos mais fáceis de errar. O segredo é seguir a ordem que o céu realmente usa: quente e luminoso no horizonte, a arrefecer pelo rosa e pelo violeta à medida que olhas para cima. Salta essas cores do meio e o gradiente fica cinzento.

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

Quando o sol está baixo, a sua luz atravessa muito mais atmosfera para chegar a ti. Pelo caminho, o ar dispersa a luz azul para fora do feixe direto, por isso a luz perto do sol chega amarela, laranja e vermelha. Mais alto no céu, longe do sol, resta 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 ao dourado no horizonte, passando pelo violeta, pelo rosa e pelo laranja. Cada passo é vizinho do seguinte, por isso nada fica cinzento.

| 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 pálido | `#fcd34d` |

As faixas de um pôr do sol limpo. Os céus reais variam com as nuvens, a neblina e a estação, mas a ordem mantém-se.

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

Estas dez paletas seguem todas a ordem do céu, de cima para baixo. Algumas usam a gama inteira; outras ficam só com a ponta quente ou só com 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%)`
- Neblina de 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 de pôr do sol. O radial coloca o próprio sol na margem inferior da imagem.

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

## Porque é que os gradientes pôr do sol ficam baços e como os corrigir

Há dois erros clássicos. O primeiro é juntar diretamente o azul e o laranja. São quase opostos no círculo cromático, e uma mistura direta entre eles dá em média cinzento no meio. O céu nunca faz isto, porque passa pelo violeta e pelo rosa. O segundo é esbater o laranja para o preto à procura de um ambiente mais escuro. O laranja escuro é castanho, por isso o gradiente lê-se como ferrugem ou lama e não como fim de tarde.

- Azul direto a laranja: meio cinzento: `linear-gradient(180deg, #1d4ed8 0%, #f97316 100%)`
- Pelo violeta e pelo rosa: limpo: `linear-gradient(180deg, #1d4ed8 0%, #7c3aed 30%, #db2777 60%, #f97316 100%)`
- Preto a laranja: castanho: `linear-gradient(180deg, #0a0a0a 0%, #f97316 100%)`
- Do índigo pelo ameixa: crepúsculo: `linear-gradient(180deg, #1b1b3a 0%, #6d2e6b 45%, #f97316 100%)`

Dois pores do sol baços e as suas correções. Ambas juntam as cores por onde o próprio céu passa.

Se quiseres menos paragens, misturar em OKLCH ajuda: mantém as cores saturadas a meio da mistura. Vê [gradientes OKLCH em CSS](https://gradiently.design/pt-pt/guide/css-gradient-oklch) e, para a teoria, [gradientes baços](https://gradiently.design/pt-pt/guide/muddy-gradients).

## Onde funcionam os gradientes pôr do sol

Os pores do sol trazem um sentimento claro: o fim do dia, calor, um pouco de nostalgia. Isso torna-os naturais para alguns trabalhos e estranhos para outros. Um pôr do sol luminoso, de gama completa, fica bem a eventos de verão, viagens, música e hotelaria. Uma versão crepuscular, sobretudo violeta, fica bem a lançamentos ao fim do dia, podcasts e tudo o que seja reflexivo. Uma versão só de quentes, do dourado ao coral, fica bem a comida, bebida e momentos de saldos.

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

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

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

1. **Escolhe quanto do céu queres** A gama inteira para dramatismo, só a ponta quente para energia ou só o crepúsculo para calma.
2. **Põe os quentes em baixo** O dourado e o laranja pertencem junto ao horizonte. Os pores do sol invertidos podem funcionar, mas leem-se como estilizados.
3. **Nunca saltes um vizinho** Entre o azul e o laranja, inclui o violeta e o rosa. Entre o laranja e o escuro, inclui o ameixa ou o índigo.
4. **Dá menos espaço à faixa quente** Nos céus reais, as cores mais luminosas ficam coladas ao horizonte. Mantê-las no quarto inferior faz o gradiente parecer natural.
5. **Junta grão** Os céus longos e suaves ganham bandas com facilidade. Uma camada fina de ruído mantém a mistura 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. O fundo é luminoso e quente, perfeito para texto escuro ou para nada. O meio, onde o rosa encontra o laranja, é o sítio mais difícil para qualquer um deles. Põe os títulos em cima e os pormenores em baixo, ou mantém as palavras numa só faixa calma.

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

Título em cima, no céu mais escuro, pormenores mais abaixo.

Uma story vertical de saldos com um título por cima de um brilho quente no fundo

Uma story em que o brilho quente fica por baixo 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 uma página, com o título colocado no céu escuro por cima do brilho.

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

## FAQ

### Que cores tem um gradiente pôr do sol?

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

### Porque é que o meu gradiente pôr do sol parece baço?

Normalmente porque mistura o azul diretamente com o laranja, ou o laranja diretamente com o preto. Junta violeta e rosa entre o azul e o laranja, e escurece através do ameixa ou do índigo em vez do preto.

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

Para um pôr do sol completo, experimenta linear-gradient(180deg, #1e3a8a 0%, #6d28d9 25%, #db2777 50%, #f97316 75%, #fcd34d 100%). Todas as paletas desta página podem ser copiadas como CSS.

### Onde deve ficar o texto num gradiente pôr do sol?

Na parte superior, mais escura e fria, para texto branco, ou na faixa quente e pálida para texto escuro. Evita o meio, onde o rosa encontra o laranja.