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

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.

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.

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.

Se você quer calor sem o drama, as coleções separadas de gradiente vermelho, gradiente laranja e gradiente amarelo 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 explica por que o vermelho esmaecendo em preto pode virar marrom e como uma parada de carmim evita isso.

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.

.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; }
}

Mais loops e suas desvantagens estão em gradiente animado em CSS.

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.

Para saber mais sobre layouts que vendem, veja design de post de promoção. 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.