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

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

As chamas seguem uma ordem fixa de cor, e um gradiente de fogo só parece quente quando a respeita. Veja essa ordem, códigos para cada tipo de fogo e uma tremulação que você anima em poucas linhas.

## The short version

- Um gradiente de fogo segue a ordem de uma chama de verdade: amarelo pálido perto da base, depois laranja, depois vermelho nas pontas, esmaecendo em fumaça escura.
- As partes mais quentes de um fogo parecem as mais pálidas, então a cor mais clara fica na fonte do calor, não na borda.
- Em CSS, `linear-gradient(0deg, …)` começa embaixo, que é onde a chama começa.
- Brasas e carvões combinam com gradientes radiais que brilham de um centro quente até quase preto.
- Texto escuro se lê sobre a parte amarela de um gradiente de fogo, e texto branco ou creme se lê sobre as partes vermelha e escura.

Um **gradiente de fogo** vai do amarelo pálido, quase branco, na base da chama, passando pelo laranja vivo, até o vermelho profundo nas pontas, e depois entra no escuro da fumaça ou da noite. Siga essa ordem e o gradiente transmite calor de imediato. Inverta, com o amarelo no alto, e ele parece um pôr do sol. Abaixo estão as zonas da chama como cores, códigos para copiar, de brasas fumegantes a um incêndio completo, e uma tremulação suave em CSS.

## Leia uma chama de baixo para cima

O material incandescente muda de cor com a temperatura: quanto mais quente, mais pálido e branco ele parece, e ao esfriar passa pelo amarelo e pelo laranja até um vermelho opaco. Num fogo de lenha, isso significa que a luz mais pálida fica embaixo, perto do combustível, e o vermelho fica nas pontas trêmulas. Uma chama de gás queima limpa, quase sem fuligem incandescente, e por isso mostra a luz azul do próprio gás em combustão.

| 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` |
| Borda que esfria | Carmim a brasa | `#b3001b` a `#7f1d1d` |
| Fumaça e noite | Carvão | `#1c0606` |

Uma chama como uma lista de paradas. A maioria dos gradientes de fogo usa quatro ou cinco delas, nesta ordem.

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

A paleta do fogo, do mais quente ao mais frio. Repare que não há marrom: ir do vermelho ao escuro passando por um carmim profundo mantém o brilho.

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

Estes são verticais e começam embaixo. Em CSS, `0deg` aponta para cima, então a primeira parada é a base da chama. Uma fogueira mantém uma base dourada suave e um longo esmaecer em vermelho; um incêndio é mais curto, mais forte e mais saturado; o calor branco é o aspecto 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 queimar mais quente do que uma amarela e combina com tecnologia e ciência muito melhor do que o laranja.

## Gradientes de brasa, carvão e lava

Nem todo design de fogo precisa de chamas. Brasas e carvões são o fogo em repouso: quase todo escuro, com um núcleo quente brilhando por dentro. Passam uma sensação sombria e premium e deixam mais espaço calmo para palavras do que um incêndio completo. A lava fica entre os dois, uma crosta escura rachada por uma veia brilhante. Funcionam melhor como gradientes radiais, que irradiam para fora como o calor.

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

Fogo em repouso. O gradiente de brasas brilha a partir da borda inferior, o que cria um palco perfeito para um produto ou um título acima dele.

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

## Por que alguns gradientes de fogo parecem errados

O fogo é um dos poucos gradientes que as pessoas julgam na hora, porque todo mundo já ficou olhando para um de verdade. Três erros entregam: a ordem está errada, a ponta escura vira marrom ou o amarelo é tão esverdeado que parece ácido em vez de calor. [Gradientes sujos](https://gradiently.design/pt-br/guide/muddy-gradients) explica por que o vermelho esmaecendo em preto pode virar marrom e como uma parada de carmim evita isso.

### Parece falso

- Amarelo no alto, vermelho embaixo
- Vermelho esmaecendo direto num preto amarronzado
- 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 fonte, vermelho nas pontas
- Vermelho em carmim e depois em carvão
- Um amarelo dourado quente, como #ffd23f
- Um núcleo brilhante do qual tudo esmaece
- Fogo brilhando saindo da escuridão

## Um gradiente de fogo animado em CSS

Uma deriva lenta para cima vende a ideia de chama melhor do que qualquer tremulação rápida. Faça o gradiente com o dobro da altura do elemento e mova-o suavemente para cima e para baixo. Respeite quem pediu menos movimento, como descrito em [movimento reduzido](https://gradiently.design/pt-br/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 se acomoda a cada seis segundos. Animar `background-position` é barato; para efeitos mais pesados, veja as notas de desempenho no guia de gradiente animado.

Mais loops e suas desvantagens estão em [gradiente animado em CSS](https://gradiently.design/pt-br/guide/css-animated-gradient).

## Palavras e ofertas sobre um gradiente de fogo

O fogo diz urgência, energia e calor, e por isso carrega naturalmente promoções relâmpago, cardápios picantes, desafios de treino e tudo que tenha prazo. A cor do texto depende de onde as palavras caem: um carvão profundo ou um marrom de brasa se lê sobre a base dourada, e branco ou creme quente se lê sobre as partes vermelha e escura. Evite colocar palavras sobre o meio laranja, onde nenhum dos dois funciona especialmente bem.

Um post vertical de rede social com fundo em vermelho quente e laranja e o título Últimas 48 horas em texto creme

Um post vertical de promoção. A linha urgente fica na ponta escura, de brasa; a luz mais quente fica longe das palavras.

Para saber mais sobre layouts que vendem, veja [design de post de promoção](https://gradiently.design/pt-br/guide/sale-post-design). Se preferir não montar à mão, o Designer do Gradiently pode receber um briefing de uma linha como “liquidação de inverno termina domingo”, perguntar o que precisa, escrever as palavras e montar o post no seu Mark, e depois fazer também as versões de story e quadrada.

## FAQ

### Quais cores há em um gradiente de fogo?

Amarelo pálido (#fff3b0), amarelo dourado (#ffd23f), laranja (#ff8c1a), vermelho-chama (#e8361c) e um carmim profundo ou carvão para terminar. Use nessa ordem, da base da chama para cima.

### Em que direção deve ir um gradiente de chama?

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

### Como evito que um gradiente de fogo vire marrom?

Vá do vermelho a um carmim profundo, como #b3001b, antes de chegar perto do preto, em vez de ir direto do vermelho ao preto.

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

Uma chama azul de gás costuma queimar mais quente do que uma chama amarela de lenha, então combina com tecnologia, ciência, energia e tudo que queira parecer intenso, mas frio. Vá de quase branco na base, passando pelo azul-céu, até um azul-marinho profundo.

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

Pode. Faça o fundo com o dobro da altura usando `background-size: 100% 200%` e anime `background-position` devagar, e desligue com `prefers-reduced-motion`.