# Fire gradient: flame codes from ember to blaze

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

Flames have a fixed order of colour, and a fire gradient only looks hot when it follows it. Here is that order, codes for every kind of fire, and a flicker you can animate in a few lines.

## The short version

- A fire gradient follows the order of a real flame: pale yellow near the base, then orange, then red at the tips, fading into dark smoke.
- The hottest parts of a fire look the palest, so the brightest stop belongs at the source of the heat, not at the edge.
- In CSS, `linear-gradient(0deg, …)` starts at the bottom, which is where a flame starts.
- Embers and coals suit radial gradients that glow from a hot centre into near black.
- Dark type reads on the yellow part of a fire gradient, and white or cream type reads on the red and dark parts.

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.

| Zone | Colour | Hex |
| --- | --- | --- |
| Core of a gas flame | Blue | `#38bdf8` to `#1d4ed8` |
| Base of a wood flame | Pale yellow, nearly white | `#fff3b0` |
| Lower body | Golden yellow | `#ffd23f` |
| Middle | Orange | `#ff8c1a` |
| Tips | Flame red | `#e8361c` |
| Cooling edge | Crimson to ember | `#b3001b` to `#7f1d1d` |
| Smoke and night | Char | `#1c0606` |

A flame as a list of stops. Most fire gradients use four or five of these, in this order.

- White heat: #fff3b0
- Golden flame: #ffd23f
- Orange flame: #ff8c1a
- Flame red: #e8361c
- Crimson: #b3001b
- Ember: #7f1d1d
- Char: #1c0606

The fire palette from hottest to coolest. Notice there is no brown: going from red to dark through deep crimson keeps it glowing.

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

- Campfire, base to tip: `linear-gradient(0deg, #fff3b0 0%, #ffd23f 18%, #ff8c1a 45%, #e8361c 72%, #5c0d0d 100%)`
- Blaze: `linear-gradient(0deg, #ffe066 0%, #ff9f1c 35%, #ff4d00 70%, #b3001b 100%)`
- White heat: `radial-gradient(circle at 50% 70%, #ffffff 0%, #fff7cc 20%, #ffc53d 45%, #ff6a00 75%, #a11a00 100%)`
- Gas flame blue: `linear-gradient(0deg, #e0f7ff 0%, #38bdf8 25%, #1d4ed8 60%, #0b1033 100%)`

Four flames. The blue one breaks the warm rule on purpose: a clean gas flame usually burns hotter than a yellow one, and it suits tech and science far better than orange does.

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

- Glowing embers: `radial-gradient(ellipse at 50% 100%, #ff7a18 0%, #c2410c 20%, #7f1d1d 45%, #1c0606 80%)`
- Hot coal: `radial-gradient(circle at 50% 60%, #ff4d00 0%, #9a1b0b 25%, #2b0a05 55%, #0a0303 85%)`
- Lava flow: `linear-gradient(135deg, #1a0505 0%, #7a0f0f 35%, #ff3d00 60%, #ffb000 80%, #2a0808 100%)`

Fire at rest. The embers gradient glows up from the bottom edge, which makes a perfect stage for a product or a headline above it.

If you want warmth without the drama, the separate [red gradient](https://gradiently.design/guide/red-gradient), [orange gradient](https://gradiently.design/guide/orange-gradient) and [yellow gradient](https://gradiently.design/guide/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](https://gradiently.design/guide/muddy-gradients) explains why red fading into black can turn brown, and how a crimson stop prevents it.

### Looks fake

- Yellow at the top, red at the bottom
- Red fading straight into a brownish black
- A cool, lemon yellow with a green cast
- Even colour from edge to edge, no hot spot
- Flame colours on a white background

### Looks hot

- Palest colour at the source, red at the tips
- Red into crimson, then into char
- A warm golden yellow such as #ffd23f
- One bright core that everything fades from
- Fire glowing out of darkness

## 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](https://gradiently.design/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; }
}
```

The flame rises and settles every six seconds. Animating `background-position` is cheap; for heavier effects, see the performance notes in the animated gradient guide.

More loops and their trade offs are in [CSS animated gradient](https://gradiently.design/guide/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.

A portrait social post with a warm red and orange background and the headline Last 48 hours in cream type

A portrait sale post. The urgent line sits on the dark, ember end; the warmest light stays clear of the words.

For more on layouts that sell, see [sale post design](https://gradiently.design/guide/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.

## FAQ

### What colours are in a fire gradient?

Pale yellow (#fff3b0), golden yellow (#ffd23f), orange (#ff8c1a), flame red (#e8361c) and a deep crimson or char to finish. Use them in that order from the base of the flame.

### Which way should a flame gradient go?

From the bottom up, with the palest colour at the base. In CSS, `linear-gradient(0deg, …)` lists the bottom stop first.

### How do I stop a fire gradient turning brown?

Go from red into a deep crimson such as #b3001b before reaching near black, rather than straight from red to black.

### What is a blue flame gradient used for?

A blue gas flame usually burns hotter than a yellow wood flame, so it suits tech, science, energy and anything that wants to feel intense but cool. Run it from near white at the base through sky blue to deep navy.

### Can I animate a fire gradient without JavaScript?

Yes. Make the background twice as tall with `background-size: 100% 200%` and animate `background-position` slowly, and switch it off for `prefers-reduced-motion`.