# Vuurkleurverloop: vlamcodes van gloed tot laaiend vuur

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

Vlammen hebben een vaste kleurvolgorde, en een vuurkleurverloop ziet er alleen heet uit als het die volgt. Hier is die volgorde, codes voor elk soort vuur en een flikkering die je in een paar regels animeert.

## The short version

- Een vuurkleurverloop volgt de volgorde van een echte vlam: lichtgeel bij de basis, dan oranje, dan rood aan de toppen, vervagend in donkere rook.
- De heetste delen van een vuur zien er het bleekst uit, dus de felste kleurstop hoort bij de bron van de hitte, niet aan de rand.
- In CSS begint `linear-gradient(0deg, …)` onderaan, en daar begint ook een vlam.
- Gloed en kolen passen bij radiale kleurverlopen die vanuit een hete kern tot bijna zwart uitstralen.
- Donkere letters lezen goed op het gele deel van een vuurkleurverloop, en witte of crèmekleurige letters op de rode en donkere delen.

Een **vuurkleurverloop** loopt van lichtgeel, bijna wit, aan de basis van de vlam, via fel oranje, naar diep rood aan de toppen, en dan de donkerte van rook of nacht in. Volg die volgorde en het kleurverloop leest meteen als hitte. Draai hem om, met geel bovenaan, en het lijkt een zonsondergang. Hieronder staan de vlamzones als kleuren, kopieerbare codes van smeulende gloed tot een volledig laaiend vuur en een zachte CSS-flikkering.

## Lees een vlam van onder naar boven

Gloeiend materiaal verandert van kleur met de temperatuur: hoe heter, hoe bleker en witter het eruitziet, en bij afkoeling glijdt het via geel en oranje naar een doffe rode kleur. In een houtvuur betekent dat dat het bleekste licht laag zit, bij de brandstof, en het rood bij de flikkerende toppen. Een gasvlam brandt schoon, met bijna geen gloeiend roet, en toont daarom het blauwe licht van het brandende gas zelf.

| Zone | Kleur | Hex |
| --- | --- | --- |
| Kern van een gasvlam | Blauw | `#38bdf8` tot `#1d4ed8` |
| Basis van een houtvlam | Lichtgeel, bijna wit | `#fff3b0` |
| Onderste deel | Goudgeel | `#ffd23f` |
| Midden | Oranje | `#ff8c1a` |
| Toppen | Vlamrood | `#e8361c` |
| Afkoelende rand | Karmozijn tot gloed | `#b3001b` tot `#7f1d1d` |
| Rook en nacht | Verkoold | `#1c0606` |

Een vlam als lijst van kleurstops. De meeste vuurkleurverlopen gebruiken vier of vijf hiervan, in deze volgorde.

- Witte hitte: #fff3b0
- Gouden vlam: #ffd23f
- Oranje vlam: #ff8c1a
- Vlamrood: #e8361c
- Karmozijn: #b3001b
- Gloed: #7f1d1d
- Verkoold: #1c0606

Het vuurpalet van heetst naar koelst. Merk op dat er geen bruin in zit: van rood via diep karmozijn naar donker houdt het gloeiend.

## Vlamkleurverloopcodes: van kampvuur tot laaiend vuur

Deze zijn verticaal en beginnen onderaan. In CSS wijst `0deg` omhoog, dus de eerste stop is de basis van de vlam. Een kampvuur houdt een zachte gouden basis en een lange rode uitloop; een laaiend vuur is korter, luider en verzadigder; witte hitte is hoe de binnenkant van een oven eruitziet.

- Kampvuur, van basis tot top: `linear-gradient(0deg, #fff3b0 0%, #ffd23f 18%, #ff8c1a 45%, #e8361c 72%, #5c0d0d 100%)`
- Laaiend vuur: `linear-gradient(0deg, #ffe066 0%, #ff9f1c 35%, #ff4d00 70%, #b3001b 100%)`
- Witte hitte: `radial-gradient(circle at 50% 70%, #ffffff 0%, #fff7cc 20%, #ffc53d 45%, #ff6a00 75%, #a11a00 100%)`
- Blauwe gasvlam: `linear-gradient(0deg, #e0f7ff 0%, #38bdf8 25%, #1d4ed8 60%, #0b1033 100%)`

Vier vlammen. De blauwe doorbreekt de warme regel met opzet: een schone gasvlam brandt meestal heter dan een gele, en past veel beter bij tech en wetenschap dan oranje.

## Gloed-, kolen- en lavakleurverlopen

Niet elk vuurontwerp heeft vlammen nodig. Gloed en kolen zijn vuur in rust: grotendeels donker, met een hete kern die erdoorheen schijnt. Ze voelen sfeervol en premium, en laten meer rustige ruimte voor woorden dan een volledig laaiend vuur. Lava zit ertussenin, een donkere korst gespleten door een heldere naad. Deze werken het best als radiale kleurverlopen, die naar buiten gloeien zoals hitte dat doet.

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

Vuur in rust. Het gloedverloop gloeit op vanaf de onderrand, wat een perfect podium maakt voor een product of een kop erboven.

Wil je warmte zonder het drama, dan nemen de aparte collecties [rood kleurverloop](https://gradiently.design/nl/guide/red-gradient), [oranje kleurverloop](https://gradiently.design/nl/guide/orange-gradient) en [geel kleurverloop](https://gradiently.design/nl/guide/yellow-gradient) elk één deel van de vlam en gaan er verder mee.

## Waarom sommige vuurkleurverlopen er verkeerd uitzien

Vuur is een van de weinige kleurverlopen die mensen meteen beoordelen, omdat iedereen naar een echt vuur heeft gestaard. Drie fouten verraden het: de volgorde klopt niet, het donkere uiteinde wordt bruin, of het geel is zo groenig dat het als zuur leest in plaats van als hitte. [Modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients) legt uit waarom rood dat in zwart overgaat bruin kan worden, en hoe een karmozijnrode stop dat voorkomt.

### Ziet er nep uit

- Geel bovenaan, rood onderaan
- Rood dat direct in een bruinig zwart overgaat
- Een koel, citroengeel met een groenige zweem
- Gelijke kleur van rand tot rand, geen hete plek
- Vlamkleuren op een witte achtergrond

### Ziet er heet uit

- Bleekste kleur bij de bron, rood aan de toppen
- Rood naar karmozijn, dan naar verkoold
- Een warm goudgeel zoals #ffd23f
- Eén heldere kern waaruit alles vervaagt
- Vuur dat uit de duisternis gloeit

## Een geanimeerd vuurkleurverloop in CSS

Een langzame opwaartse drift verkoopt het idee van vlam beter dan welke snelle flikkering ook. Maak het kleurverloop twee keer zo hoog als het element en beweeg het zachtjes op en neer. Houd rekening met bezoekers die om minder beweging hebben gevraagd, zoals beschreven in [beperkte beweging](https://gradiently.design/nl/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; }
}
```

De vlam stijgt en zakt elke zes seconden. `background-position` animeren is goedkoop; voor zwaardere effecten, zie de prestatienotities in de gids over geanimeerde kleurverlopen.

Meer lussen en hun afwegingen staan in [CSS-geanimeerd kleurverloop](https://gradiently.design/nl/guide/css-animated-gradient).

## Woorden en aanbiedingen op een vuurkleurverloop

Vuur zegt urgentie, energie en hitte, dus het draagt vanzelf flitsacties, pittige menu's, sportuitdagingen en alles met een deadline. De letterkleur hangt af van waar de woorden landen: diep houtskool of gloedbruin leest op de gouden basis, en wit of warm crème op de rode en donkere delen. Vermijd woorden over het oranje midden, waar geen van beide bijzonder goed werkt.

Een staande socialpost met een warme rode en oranje achtergrond en de kop Laatste 48 uur in crèmekleurige letters

Een staande actiepost. De urgente regel staat op het donkere, gloeiende uiteinde; het warmste licht blijft vrij van de woorden.

Voor meer over lay-outs die verkopen, zie [actiepost ontwerpen](https://gradiently.design/nl/guide/sale-post-design). Wil je het liever niet met de hand opmaken, dan kan de Designer van Gradiently een briefing van één regel als "winteropruiming eindigt zondag" aannemen, vragen wat hij nodig heeft, de woorden schrijven en de post in jouw Mark zetten, en ook de story- en vierkante versies maken.

## FAQ

### Welke kleuren zitten in een vuurkleurverloop?

Lichtgeel (#fff3b0), goudgeel (#ffd23f), oranje (#ff8c1a), vlamrood (#e8361c) en een diep karmozijn of verkoold om af te sluiten. Gebruik ze in die volgorde vanaf de basis van de vlam.

### Welke kant moet een vlamkleurverloop op?

Van onder naar boven, met de bleekste kleur aan de basis. In CSS noemt `linear-gradient(0deg, …)` eerst de onderste stop.

### Hoe voorkom ik dat een vuurkleurverloop bruin wordt?

Ga van rood naar een diep karmozijn zoals #b3001b voordat je bijna zwart bereikt, in plaats van direct van rood naar zwart.

### Waar wordt een blauw vlamkleurverloop voor gebruikt?

Een blauwe gasvlam brandt meestal heter dan een gele houtvlam, dus het past bij tech, wetenschap, energie en alles wat intens maar koel wil voelen. Laat hem lopen van bijna wit aan de basis via hemelsblauw naar diep marineblauw.

### Kan ik een vuurkleurverloop animeren zonder JavaScript?

Ja. Maak de achtergrond twee keer zo hoog met `background-size: 100% 200%` en animeer `background-position` langzaam, en zet het uit voor `prefers-reduced-motion`.