Fire gradient: flame codes from ember to blaze

A fire gradient runs from pale yellow, almost white, at the base of the flame, through bright orange, to deep red at the tips, and then into the dark of smoke or night. Follow that order and the gradient reads as heat straight away. Reverse it, with yellow at the top, and it looks like a sunset instead. Below are the flame zones as colours, copyable codes from smouldering embers to a full blaze, and a gentle CSS flicker.

Read a flame from the bottom up

Glowing material changes colour with temperature: the hotter it is, the paler and whiter it looks, and as it cools it slides through yellow and orange to a dull red. In a wood fire that means the palest light sits low, near the fuel, and the red sits at the flickering tips. A gas flame burns cleanly, with almost no glowing soot, so it shows the blue light of the burning gas itself.

Flame gradient codes: campfire to blaze

These are vertical, starting at the bottom. In CSS, 0deg points up, so the first stop is the base of the flame. A campfire keeps a soft gold base and a long red fade; a blaze is shorter, louder and more saturated; white heat is what the inside of a furnace looks like.

Ember, coal and lava gradients

Not every fire design needs flames. Embers and coals are fire at rest: mostly dark, with a hot core glowing through. They feel moody and premium, and they leave more calm space for words than a full blaze. Lava sits between the two, a dark crust split by a bright seam. These work best as radial gradients, which glow outwards the way heat does.

If you want warmth without the drama, the separate red gradient, orange gradient and yellow gradient collections each take one part of the flame and go further with it.

Why some fire gradients look wrong

Fire is one of the few gradients people judge instantly, because everyone has stared at a real one. Three mistakes give it away: the order is wrong, the dark end turns brown, or the yellow is so greenish that it reads as acid rather than heat. Muddy gradients explains why red fading into black can turn brown, and how a crimson stop prevents it.

An animated fire gradient in CSS

A slow upward drift sells the idea of flame better than any fast flicker. Make the gradient twice as tall as the element, then move it gently up and down. Respect visitors who have asked for less motion, as described in reduced motion.

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

More loops and their trade offs are in CSS animated gradient.

Words and offers on a fire gradient

Fire says urgency, energy and heat, so it naturally carries flash sales, spicy menus, workout challenges and anything with a deadline. Type colour depends on where the words land: a deep charcoal or ember brown reads on the golden base, and white or warm cream reads on the red and dark parts. Avoid putting words across the orange middle, where neither works especially well.

For more on layouts that sell, see sale post design. If you would rather not lay it out by hand, Gradiently's Designer can take a one line brief like "winter clearance ends Sunday", ask what it needs, write the words and set the post in your Mark, then make the story and square versions too.