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

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.

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.

Se queres calor sem o drama, as coleções separadas de gradiente vermelho, gradiente laranja e gradiente amarelo 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 explicam porque é que o vermelho a esbater-se em preto pode virar castanho e como uma paragem carmesim o evita.

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.

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

Há mais ciclos e as suas contrapartidas em gradiente animado em CSS.

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.

Para saber mais sobre layouts que vendem, vê design de publicações de saldos. 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.