# Ildgradient: flammekoder fra glør til full brann

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

Flammer har en fast fargerekkefølge, og en ildgradient ser bare varm ut når den følger den. Her er rekkefølgen, koder for alle slags ild og en flimring du kan animere med noen få linjer.

## The short version

- En ildgradient følger rekkefølgen i en ekte flamme: blekgul nær foten, så oransje, så rødt i tuppene, før den tones ut i mørk røyk.
- De varmeste delene av en ild ser blekest ut, så det lyseste stoppet hører hjemme ved varmekilden, ikke i kanten.
- I CSS starter `linear-gradient(0deg, …)` nederst, der en flamme starter.
- Glør og kull passer til radielle gradienter som gløder fra en varm kjerne ut i nesten svart.
- Mørk tekst leses på den gule delen av en ildgradient, og hvit eller kremfarget tekst leses på de røde og mørke delene.

En **ildgradient** går fra blekgul, nesten hvit, ved foten av flammen, via klar oransje, til dyp rød i tuppene, og så videre inn i mørket fra røyk eller natt. Følg den rekkefølgen, og gradienten leses som varme med en gang. Snu den, med gult øverst, og den ser ut som en solnedgang i stedet. Under finner du flammesonene som farger, koder du kan kopiere fra ulmende glør til full brann, og en rolig flimring i CSS.

## Les en flamme nedenfra og opp

Glødende materiale skifter farge med temperaturen: jo varmere det er, desto blekere og hvitere ser det ut, og når det kjøles ned, glir det gjennom gult og oransje til en matt rød. I et vedbål betyr det at det bleke lyset ligger lavt, nær brenselet, og det røde sitter i de flakkende tuppene. En gassflamme brenner rent, nesten uten glødende sot, så den viser det blå lyset fra selve gassen som brenner.

| Sone | Farge | Hex |
| --- | --- | --- |
| Kjernen i en gassflamme | Blå | `#38bdf8` til `#1d4ed8` |
| Foten av en vedflamme | Blekgul, nesten hvit | `#fff3b0` |
| Nedre del | Gyllen gul | `#ffd23f` |
| Midten | Oransje | `#ff8c1a` |
| Tuppene | Flammerød | `#e8361c` |
| Kant som kjøles | Karmosin til glør | `#b3001b` til `#7f1d1d` |
| Røyk og natt | Forkullet | `#1c0606` |

En flamme som en liste med stopp. De fleste ildgradienter bruker fire eller fem av disse, i denne rekkefølgen.

- Hvit varme: #fff3b0
- Gyllen flamme: #ffd23f
- Oransje flamme: #ff8c1a
- Flammerød: #e8361c
- Karmosin: #b3001b
- Glør: #7f1d1d
- Forkullet: #1c0606

Ildpaletten fra varmest til kaldest. Legg merke til at det ikke finnes brunt: å gå fra rødt til mørkt via dyp karmosin holder gløden i live.

## Koder for flammegradienter: fra leirbål til full brann

Disse er vertikale og starter nederst. I CSS peker `0deg` oppover, så det første stoppet er foten av flammen. Et leirbål har en myk gyllen fot og en lang rød uttoning; en full brann er kortere, mer høylytt og mer mettet; hvit varme er slik innsiden av en smelteovn ser ut.

- Leirbål, fra fot til tupp: `linear-gradient(0deg, #fff3b0 0%, #ffd23f 18%, #ff8c1a 45%, #e8361c 72%, #5c0d0d 100%)`
- Full brann: `linear-gradient(0deg, #ffe066 0%, #ff9f1c 35%, #ff4d00 70%, #b3001b 100%)`
- Hvit varme: `radial-gradient(circle at 50% 70%, #ffffff 0%, #fff7cc 20%, #ffc53d 45%, #ff6a00 75%, #a11a00 100%)`
- Blå gassflamme: `linear-gradient(0deg, #e0f7ff 0%, #38bdf8 25%, #1d4ed8 60%, #0b1033 100%)`

Fire flammer. Den blå bryter med varmeregelen med vilje: en ren gassflamme brenner som regel varmere enn en gul, og den passer langt bedre til teknologi og vitenskap enn oransje gjør.

## Gradienter for glør, kull og lava

Ikke alle ilddesign trenger flammer. Glør og kull er ild i hvile: for det meste mørke, med en varm kjerne som gløder gjennom. De føles stemningsfulle og eksklusive, og de gir mer rolig plass til ord enn en full brann. Lava ligger mellom de to, en mørk skorpe splittet av en lysende søm. Disse fungerer best som radielle gradienter, som gløder utover slik varme gjør.

- Glødende glør: `radial-gradient(ellipse at 50% 100%, #ff7a18 0%, #c2410c 20%, #7f1d1d 45%, #1c0606 80%)`
- Glødende kull: `radial-gradient(circle at 50% 60%, #ff4d00 0%, #9a1b0b 25%, #2b0a05 55%, #0a0303 85%)`
- Lavastrøm: `linear-gradient(135deg, #1a0505 0%, #7a0f0f 35%, #ff3d00 60%, #ffb000 80%, #2a0808 100%)`

Ild i hvile. Glørgradienten gløder opp fra nederkanten, noe som gir en perfekt scene for et produkt eller en overskrift over den.

Vil du ha varme uten dramatikken, tar samlingene [rød gradient](https://gradiently.design/nb/guide/red-gradient), [oransje gradient](https://gradiently.design/nb/guide/orange-gradient) og [gul gradient](https://gradiently.design/nb/guide/yellow-gradient) hver sin del av flammen og går videre med den.

## Hvorfor noen ildgradienter ser feil ut

Ild er en av få gradienter folk bedømmer med en gang, fordi alle har stirret inn i en ekte en. Tre feil avslører den: rekkefølgen er feil, den mørke enden blir brun, eller det gule er så grønnstikkende at det leses som syre i stedet for varme. [Grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) forklarer hvorfor rødt som tones ut i svart kan bli brunt, og hvordan et karmosinstopp hindrer det.

### Ser falsk ut

- Gult øverst, rødt nederst
- Rødt som går rett over i en brunaktig svart
- En kjølig, sitrongul med grønt stikk
- Jevn farge fra kant til kant, ingen varm kjerne
- Flammefarger på hvit bakgrunn

### Ser varm ut

- Blekeste farge ved kilden, rødt i tuppene
- Rødt over i karmosin, så over i forkullet
- En varm gyllen gul som #ffd23f
- Én lys kjerne som alt tones ut fra
- Ild som gløder ut av mørket

## En animert ildgradient i CSS

En langsom bevegelse oppover selger ideen om en flamme bedre enn noen rask flimring. Gjør gradienten dobbelt så høy som elementet, og flytt den rolig opp og ned. Respekter besøkende som har bedt om mindre bevegelse, som beskrevet i [redusert bevegelse](https://gradiently.design/nb/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; }
}
```

Flammen stiger og legger seg hvert sjette sekund. Å animere `background-position` er billig; for tyngre effekter, se ytelsesnotatene i guiden om animerte gradienter.

Flere løkker og avveiningene deres finner du i [animert gradient i CSS](https://gradiently.design/nb/guide/css-animated-gradient).

## Ord og tilbud på en ildgradient

Ild sier hast, energi og varme, så den bærer naturlig lynsalg, sterke menyer, treningsutfordringer og alt med en frist. Tekstfargen avhenger av hvor ordene havner: en dyp koksgrå eller glørbrun leses på den gylne foten, og hvit eller varm krem leses på de røde og mørke delene. Unngå å legge ord over den oransje midten, der ingen av dem fungerer særlig godt.

Et stående innlegg i sosiale medier med varm rød og oransje bakgrunn og overskriften Siste 48 timer i kremfarget tekst

Et stående salgsinnlegg. Den viktige linjen sitter på den mørke glørenden; det varmeste lyset holder seg unna ordene.

Mer om oppsett som selger finner du i [design av salgsinnlegg](https://gradiently.design/nb/guide/sale-post-design). Vil du helst ikke sette det opp for hånd, kan Designer i Gradiently ta en brief på én linje som «vinterutsalget slutter søndag», spørre om det den trenger, skrive ordene og sette innlegget i Marken din, og så lage story- og kvadratversjonene også.

## FAQ

### Hvilke farger er det i en ildgradient?

Blekgul (#fff3b0), gyllen gul (#ffd23f), oransje (#ff8c1a), flammerød (#e8361c) og en dyp karmosin eller forkullet tone til slutt. Bruk dem i den rekkefølgen fra foten av flammen.

### Hvilken vei bør en flammegradient gå?

Nedenfra og opp, med den blekeste fargen ved foten. I CSS lister `linear-gradient(0deg, …)` det nederste stoppet først.

### Hvordan hindrer jeg at en ildgradient blir brun?

Gå fra rødt til en dyp karmosin som #b3001b før du når nesten svart, i stedet for rett fra rødt til svart.

### Hva brukes en blå flammegradient til?

En blå gassflamme brenner som regel varmere enn en gul vedflamme, så den passer til teknologi, vitenskap, energi og alt som skal føles intenst, men kjølig. La den gå fra nesten hvit ved foten via himmelblå til dyp marineblå.

### Kan jeg animere en ildgradient uten JavaScript?

Ja. Gjør bakgrunnen dobbelt så høy med `background-size: 100% 200%`, animer `background-position` langsomt, og slå det av for `prefers-reduced-motion`.