Fire Background Generator
Make a fire background: a campfire, a wall of flames along the bottom, a narrow blue gas flame or glowing embers and sparks on black. Pick a preset or set the flame height, the width of the fire, the size of the flame detail and the number of embers, and choose the colours: orange, deep red, blue, violet or green. Every picture comes from a seed number: the same seed and size always give the same picture, and New seed gives you new flames. Press Animate to watch the flames move in the preview. Choose desktop, 4K, phone, tablet, square, banner or your own size up to 4096 pixels. It is artwork drawn from maths, not a photograph. Download a PNG or JPG. Nothing is uploaded.
100% private — everything runs in your browser. Everything runs in your browser; nothing is uploaded.
The preview is the same picture drawn smaller; Animate moves the flames in the preview only. PNG and JPG download at the full size.
Picture
Flames
Runs in your browser with our own code: nothing you type is uploaded or saved. The flames and embers are drawn by our own code from the seed; they are artwork, not a photograph. You may use what you make here, including commercially, with no credit needed.
How to make a fire background
- Pick a preset: campfire, wall of flames, blue gas flame, embers and more.
- Press New seed until you like the flames.
- Set the flame height, fire width, flame detail and embers.
- Choose the colours; the bar shows the gradient every pixel comes from.
- Press Animate to see the flames move, and Stop when you like.
- Choose a size and download the PNG or JPG.
What you can use it for
- Desktop and phone wallpapers
- Backgrounds for slides, videos and streams
- Posters, flyers and covers
- Bonfire night, camping and barbecue designs
- Game and story scenes
- Website hero images
The 14 presets
| Preset | Fire | Colours | Flame height (of the long side) | Embers | Size |
|---|---|---|---|---|---|
| Campfire | Campfire | Orange fire | 0.42 | 60 | 1920 × 1080 |
| Wall of flames | Wall of flames | Orange fire | 0.45 | 90 | 1920 × 1080 |
| Blue gas flame | Gas flame | Blue gas flame | 0.36 | 0 | 1920 × 1080 |
| Embers on black | Embers and sparks only | Orange fire | 0.3 | 260 | 1920 × 1080 |
| Tall red inferno | Wall of flames | Deep red fire | 0.75 | 120 | 1920 × 1080 |
| Low flames along the bottom | Wall of flames | Orange fire | 0.22 | 40 | 1920 × 1080 |
| Big bonfire | Campfire | Orange fire | 0.62 | 140 | 1920 × 1080 |
| Small steady flame | Gas flame | Orange fire | 0.22 | 0 | 1920 × 1080 |
| Violet flames | Wall of flames | Violet flame | 0.5 | 80 | 1920 × 1080 |
| Green flames | Wall of flames | Green flame | 0.5 | 60 | 1920 × 1080 |
| Wall of blue flame | Wall of flames | Blue gas flame | 0.4 | 30 | 1920 × 1080 |
| Sparks only, blue | Embers and sparks only | Blue gas flame | 0.3 | 320 | 1920 × 1080 |
| Phone wallpaper: tall flames | Wall of flames | Orange fire | 0.55 | 110 | 1170 × 2532 |
| 4K campfire | Campfire | Orange fire | 0.45 | 90 | 3840 × 2160 |
Worked out by the tool.
The colour gradients
| Colours | Gradient stops (heat → colour) |
|---|---|
| Orange fire | 0% #050101 → 18% #3a0802 → 38% #a8200a → 58% #ef5a10 → 78% #ffb42a → 92% #ffe680 → 100% #fffbe8 |
| Deep red fire | 0% #030000 → 20% #2a0000 → 45% #7d0a05 → 70% #d0300c → 88% #ff8a2a → 100% #ffe2a0 |
| Blue gas flame | 0% #00020a → 20% #020a3a → 45% #0b2fb0 → 70% #2f7bff → 88% #8cc8ff → 100% #f0fbff |
| Violet flame | 0% #04000a → 20% #21063f → 45% #6a17b0 → 70% #b04bff → 88% #f0a0ff → 100% #fff0ff |
| Green flame | 0% #000502 → 20% #022a10 → 45% #0b8a3a → 70% #36d36a → 88% #b4ffb0 → 100% #f2fff0 |
Every pixel of the picture is a colour on the chosen gradient, blended in a straight line between the two nearest stops (tested).
What downloads
| Download | What is in it |
|---|---|
| PNG | The still picture at the full size you chose, every pixel exactly as drawn |
| JPG | The same picture as a smaller JPG (quality 92) |
To change the size afterwards, use the Image Resizer; for flaming words, the Fire Text Generator.
Which tool to use
| You want | Use |
|---|---|
| A background of flames or embers | Fire Background Generator (this page) |
| Words in flaming letters | Fire Text Generator |
| A night sky, nebula or galaxy | Galaxy Background Generator |
| Smooth colour blends | Gradient Generator |
Other tools: the Gradient Generator for colour blends, and the Noise Texture Generator for grain.
More free tools
Backgrounds and wallpapers?
Picture and colour tools that run privately in your browser, with no sign-up and no watermark.
Frequently asked questions
Is this a photo of real fire?
No. The flames and embers are drawn by our own code from the seed: it is artwork made from maths, not a photograph.
How are the flames made?
From a heat value for every point: hottest at the bottom, fading with height, and broken up by smooth random noise that is stretched upwards, so the tops flicker into tongues. The shape you choose sets where the fire sits along the bottom.
What is the colour bar?
The gradient the picture is painted with. Every pixel is a colour from that bar: the coolest parts from the left end and the hottest from the right.
How do I make a blue flame?
Pick the Blue gas flame preset, or choose Blue gas flame in Colours with any fire shape.
What does Animate do?
It moves the flames upwards in the preview. It stops by itself after 720 frames, when you press Stop, when you change anything and when you switch to another tab. The download is always the still picture.
What does the seed do?
It fixes the shape of the flames and where every ember goes. The same seed and size give exactly the same picture, pixel for pixel.
Is this the same as the fire text generator?
No. That tool sets words in flaming letters. This one makes a whole background of fire with no text.
Is it free?
Yes. There is no sign-up, no watermark and no limit.
Is anything uploaded?
No. Every pixel is worked out by JavaScript in your browser. Nothing you type is sent anywhere or saved when you close the page.