# Gradiente de fogo: códigos de chama, da brasa ao incêndio

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

As chamas têm uma ordem fixa de cores, e um gradiente de fogo só parece quente se a seguir. Eis essa ordem, códigos para todos os tipos de fogo e uma cintilação que podes animar em poucas linhas.

## The short version

- Um gradiente de fogo segue a ordem de uma chama real: amarelo pálido perto da base, depois laranja, depois vermelho nas pontas, a esbater-se em fumo escuro.
- As partes mais quentes de um fogo parecem as mais pálidas, por isso a paragem mais clara pertence à origem do calor, não à margem.
- Em CSS, `linear-gradient(0deg, …)` começa em baixo, que é onde uma chama começa.
- As brasas e os carvões pedem gradientes radiais que brilham a partir de um centro quente até quase ao preto.
- A letra escura lê-se na parte amarela de um gradiente de fogo, e a letra branca ou creme lê-se nas partes vermelhas e escuras.

Um **gradiente de fogo** vai do amarelo pálido, quase branco, na base da chama, passando por um laranja vivo, até ao vermelho profundo nas pontas, e depois para o escuro do fumo ou da noite. Segue essa ordem e o gradiente lê-se logo como calor. Inverte-a, com o amarelo em cima, e parece um pôr do sol. Aqui ficam as zonas da chama como cores, códigos copiáveis desde brasas a arder devagar até um incêndio completo e uma cintilação suave em CSS.

## Lê uma chama de baixo para cima

O material incandescente muda de cor com a temperatura: quanto mais quente, mais pálido e branco parece, e ao arrefecer passa pelo amarelo e pelo laranja até um vermelho baço. Num fogo de lenha, isso significa que a luz mais pálida fica em baixo, junto ao combustível, e o vermelho nas pontas trémulas. Uma chama de gás arde de forma limpa, quase sem fuligem incandescente, e por isso mostra a luz azul do próprio gás a arder.

| Zona | Cor | Hex |
| --- | --- | --- |
| Núcleo de uma chama de gás | Azul | `#38bdf8` a `#1d4ed8` |
| Base de uma chama de lenha | Amarelo pálido, quase branco | `#fff3b0` |
| Parte inferior | Amarelo dourado | `#ffd23f` |
| Meio | Laranja | `#ff8c1a` |
| Pontas | Vermelho chama | `#e8361c` |
| Margem a arrefecer | De carmesim a brasa | `#b3001b` a `#7f1d1d` |
| Fumo e noite | Carvão | `#1c0606` |

Uma chama como lista de paragens. A maioria dos gradientes de fogo usa quatro ou cinco destas, por esta ordem.

- Calor branco: #fff3b0
- Chama dourada: #ffd23f
- Chama laranja: #ff8c1a
- Vermelho chama: #e8361c
- Carmesim: #b3001b
- Brasa: #7f1d1d
- Carvão: #1c0606

A paleta do fogo, do mais quente ao mais frio. Repara que não há castanho: passar do vermelho ao escuro por um carmesim profundo mantém o brilho.

## Códigos de gradiente de chama: da fogueira ao incêndio

Estes são verticais, a começar em baixo. Em CSS, `0deg` aponta para cima, por isso a primeira paragem é a base da chama. Uma fogueira mantém uma base dourada suave e um longo esbatido vermelho; um incêndio é mais curto, mais forte e mais saturado; o calor branco é o aspeto do interior de uma fornalha.

- Fogueira, da base à ponta: `linear-gradient(0deg, #fff3b0 0%, #ffd23f 18%, #ff8c1a 45%, #e8361c 72%, #5c0d0d 100%)`
- Incêndio: `linear-gradient(0deg, #ffe066 0%, #ff9f1c 35%, #ff4d00 70%, #b3001b 100%)`
- Calor branco: `radial-gradient(circle at 50% 70%, #ffffff 0%, #fff7cc 20%, #ffc53d 45%, #ff6a00 75%, #a11a00 100%)`
- Azul de chama de gás: `linear-gradient(0deg, #e0f7ff 0%, #38bdf8 25%, #1d4ed8 60%, #0b1033 100%)`

Quatro chamas. A azul quebra a regra do quente de propósito: uma chama de gás limpa costuma arder mais quente do que uma amarela, e serve muito melhor a tecnologia e a ciência do que o laranja.

## Gradientes de brasa, carvão e lava

Nem todos os designs de fogo precisam de chamas. As brasas e os carvões são o fogo em repouso: sobretudo escuros, com um núcleo quente a brilhar por dentro. Têm um ar sombrio e premium e deixam mais espaço calmo para as palavras do que um incêndio completo. A lava fica entre os dois, uma crosta escura rasgada por uma veia luminosa. Resultam melhor como gradientes radiais, que brilham para fora como o calor.

- Brasas incandescentes: `radial-gradient(ellipse at 50% 100%, #ff7a18 0%, #c2410c 20%, #7f1d1d 45%, #1c0606 80%)`
- Carvão quente: `radial-gradient(circle at 50% 60%, #ff4d00 0%, #9a1b0b 25%, #2b0a05 55%, #0a0303 85%)`
- Corrente de lava: `linear-gradient(135deg, #1a0505 0%, #7a0f0f 35%, #ff3d00 60%, #ffb000 80%, #2a0808 100%)`

O fogo em repouso. O gradiente de brasas brilha a partir da margem inferior, o que cria o palco perfeito para um produto ou um título por cima.

Se queres calor sem o drama, as coleções separadas de [gradiente vermelho](https://gradiently.design/pt-pt/guide/red-gradient), [gradiente laranja](https://gradiently.design/pt-pt/guide/orange-gradient) e [gradiente amarelo](https://gradiently.design/pt-pt/guide/yellow-gradient) pegam cada uma numa parte da chama e vão mais longe com ela.

## Porque é que alguns gradientes de fogo parecem errados

O fogo é um dos poucos gradientes que as pessoas julgam num instante, porque todos já olharam para um a sério. Três erros denunciam-no: a ordem está errada, o lado escuro vira castanho, ou o amarelo é tão esverdeado que parece ácido em vez de calor. Os [gradientes sujos](https://gradiently.design/pt-pt/guide/muddy-gradients) explicam porque é que o vermelho a esbater-se em preto pode virar castanho e como uma paragem carmesim o evita.

### Parece falso

- Amarelo em cima, vermelho em baixo
- Vermelho a cair direto num preto acastanhado
- Um amarelo-limão frio com tom esverdeado
- Cor uniforme de ponta a ponta, sem ponto quente
- Cores de chama sobre fundo branco

### Parece quente

- A cor mais pálida na origem, vermelho nas pontas
- Vermelho para carmesim, e depois para carvão
- Um amarelo dourado quente, como #ffd23f
- Um núcleo brilhante de onde tudo se esbate
- Fogo a brilhar na escuridão

## Um gradiente de fogo animado em CSS

Uma deriva lenta para cima vende a ideia de chama melhor do que qualquer cintilação rápida. Faz o gradiente com o dobro da altura do elemento e move-o suavemente para cima e para baixo. Respeita os visitantes que pediram menos movimento, como se descreve em [movimento reduzido](https://gradiently.design/pt-pt/guide/reduced-motion).

```css
.fire {
  background: linear-gradient(0deg, #fff3b0 0%, #ffd23f 15%, #ff8c1a 35%, #e8361c 55%, #5c0d0d 80%, #1c0606 100%);
  background-size: 100% 200%;
  animation: flicker 6s ease-in-out infinite alternate;
}

@keyframes flicker {
  from { background-position: 50% 100%; }
  to   { background-position: 50% 70%; }
}

@media (prefers-reduced-motion: reduce) {
  .fire { animation: none; }
}
```

A chama sobe e assenta de seis em seis segundos. Animar `background-position` é barato; para efeitos mais pesados, vê as notas de desempenho no guia de gradientes animados.

Há mais ciclos e as suas contrapartidas em [gradiente animado em CSS](https://gradiently.design/pt-pt/guide/css-animated-gradient).

## Palavras e ofertas num gradiente de fogo

O fogo diz urgência, energia e calor, por isso leva naturalmente vendas relâmpago, ementas picantes, desafios de treino e tudo o que tenha prazo. A cor da letra depende de onde as palavras caem: um carvão profundo ou um castanho de brasa lê-se na base dourada, e o branco ou o creme quente lê-se nas partes vermelhas e escuras. Evita pôr palavras no meio laranja, onde nenhuma das duas funciona especialmente bem.

Publicação vertical para redes sociais com fundo vermelho e laranja quentes e o título Últimas 48 horas em letra creme

Uma publicação vertical de saldos. A linha urgente fica no lado escuro, de brasa; a luz mais quente fica longe das palavras.

Para saber mais sobre layouts que vendem, vê [design de publicações de saldos](https://gradiently.design/pt-pt/guide/sale-post-design). Se preferires não os compor à mão, o Designer do Gradiently pode pegar num briefing de uma linha como “saldos de inverno terminam no domingo”, perguntar o que precisa, escrever as palavras e compor a publicação no teu Mark, e depois fazer também as versões de story e quadrada.

## FAQ

### Que cores tem um gradiente de fogo?

Amarelo pálido (#fff3b0), amarelo dourado (#ffd23f), laranja (#ff8c1a), vermelho chama (#e8361c) e um carmesim profundo ou carvão para terminar. Usa-as por esta ordem a partir da base da chama.

### Em que sentido deve ir um gradiente de chama?

De baixo para cima, com a cor mais pálida na base. Em CSS, `linear-gradient(0deg, …)` indica primeiro a paragem inferior.

### Como evito que um gradiente de fogo fique castanho?

Passa do vermelho para um carmesim profundo, como #b3001b, antes de chegar a quase preto, em vez de ir direto do vermelho ao preto.

### Para que serve um gradiente de chama azul?

Uma chama de gás azul costuma arder mais quente do que uma chama de lenha amarela, por isso serve tecnologia, ciência, energia e tudo o que queira parecer intenso mas fresco. Vai de quase branco na base, passando por azul-céu, até ao azul-marinho profundo.

### Posso animar um gradiente de fogo sem JavaScript?

Sim. Dá ao fundo o dobro da altura com `background-size: 100% 200%` e anima `background-position` devagar, desligando-o para `prefers-reduced-motion`.