# Ildgradient: flammekoder fra gløder til bål

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

Flammer har en fast rækkefølge af farver, og en ildgradient ser kun varm ud, når den følger den. Her er rækkefølgen, koder til alle slags ild og et flimmer, du kan animere på få linjer.

## The short version

- En ildgradient følger rækkefølgen i en ægte flamme: bleg gul nær bunden, så orange, så rød i spidserne og til sidst ud i mørk røg.
- De varmeste dele af en ild ser blegest ud, så det lyseste stop hører til ved varmekilden, ikke ved kanten.
- I CSS starter `linear-gradient(0deg, …)` nederst, og det er dér, en flamme starter.
- Gløder og kul passer til radiale gradienter, der lyser fra et varmt centrum ud mod næsten sort.
- Mørk skrift kan læses på den gule del af en ildgradient, og hvid eller cremefarvet skrift kan læses på de røde og mørke dele.

En **ildgradient** løber fra bleg gul, næsten hvid, ved flammens bund gennem klar orange til dyb rød i spidserne og derefter ud i røgens eller nattens mørke. Følg den rækkefølge, og gradienten læses som varme med det samme. Vend den om med gult øverst, og den ligner i stedet en solnedgang. Herunder er flammens zoner som farver, kopierbare koder fra ulmende gløder til et fuldt flammehav og et blidt CSS-flimmer.

## Læs en flamme nedefra og op

Glødende materiale skifter farve med temperaturen: Jo varmere det er, jo blegere og hvidere ser det ud, og når det køler af, glider det gennem gult og orange til en mat rød. I et bål af træ betyder det, at det blegeste lys sidder lavt nær brændslet, og det røde sidder i de flimrende spidser. En gasflamme brænder rent, næsten uden glødende sod, så den viser den blå lysning fra selve den brændende gas.

| Zone | Farve | Hex |
| --- | --- | --- |
| Kernen i en gasflamme | Blå | `#38bdf8` til `#1d4ed8` |
| Bunden af en træflamme | Bleg gul, næsten hvid | `#fff3b0` |
| Nedre del | Gyldengul | `#ffd23f` |
| Midten | Orange | `#ff8c1a` |
| Spidserne | Flammerød | `#e8361c` |
| Afkølende kant | Karmin til glød | `#b3001b` til `#7f1d1d` |
| Røg og nat | Forkullet | `#1c0606` |

En flamme som en liste af stop. De fleste ildgradienter bruger fire eller fem af dem i denne rækkefølge.

- Hvidglødende: #fff3b0
- Gylden flamme: #ffd23f
- Orange flamme: #ff8c1a
- Flammerød: #e8361c
- Karmin: #b3001b
- Glød: #7f1d1d
- Forkullet: #1c0606

Ildpaletten fra varmest til koldest. Læg mærke til, at der ikke er nogen brun: Når du går fra rød til mørk gennem dyb karmin, bliver den ved med at gløde.

## Flammegradient-koder: fra bålplads til flammehav

De her er lodrette og starter nederst. I CSS peger `0deg` opad, så det første stop er flammens bund. En bålplads har en blød gylden bund og en lang rød udtoning. Et flammehav er kortere, højere og mere mættet. Hvidglødende er, hvad indersiden af en ovn ser ud som.

- Bålplads, fra bund til spids: `linear-gradient(0deg, #fff3b0 0%, #ffd23f 18%, #ff8c1a 45%, #e8361c 72%, #5c0d0d 100%)`
- Flammehav: `linear-gradient(0deg, #ffe066 0%, #ff9f1c 35%, #ff4d00 70%, #b3001b 100%)`
- Hvidglødende: `radial-gradient(circle at 50% 70%, #ffffff 0%, #fff7cc 20%, #ffc53d 45%, #ff6a00 75%, #a11a00 100%)`
- Blå gasflamme: `linear-gradient(0deg, #e0f7ff 0%, #38bdf8 25%, #1d4ed8 60%, #0b1033 100%)`

Fire flammer. Den blå bryder bevidst den varme regel: En ren gasflamme brænder som regel varmere end en gul, og den passer langt bedre til tech og videnskab end orange.

## Glød-, kul- og lavagradienter

Ikke alle ilddesigns har brug for flammer. Gløder og kul er ild i hvile: for det meste mørke med en varm kerne, der skinner igennem. De føles dystre og eksklusive, og de efterlader mere ro til ord end et fuldt flammehav. Lava ligger midt imellem, en mørk skorpe flækket af en lys sprække. De virker bedst som radiale gradienter, der lyser udad, sådan som varme gør.

- Glødende gløder: `radial-gradient(ellipse at 50% 100%, #ff7a18 0%, #c2410c 20%, #7f1d1d 45%, #1c0606 80%)`
- Varmt kul: `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ødegradienten lyser op fra den nederste kant, hvilket giver en perfekt scene til et produkt eller en overskrift over den.

Hvis du vil have varme uden dramaet, tager de separate samlinger [rød gradient](https://gradiently.design/da/guide/red-gradient), [orange gradient](https://gradiently.design/da/guide/orange-gradient) og [gul gradient](https://gradiently.design/da/guide/yellow-gradient) hver en del af flammen og går videre med den.

## Hvorfor nogle ildgradienter ser forkerte ud

Ild er en af de få gradienter, folk bedømmer øjeblikkeligt, fordi alle har stirret ind i en rigtig. Tre fejl røber den: Rækkefølgen er forkert, den mørke ende bliver brun, eller det gule er så grønligt, at det læses som syre frem for varme. [Mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients) forklarer, hvorfor rød, der toner ud i sort, kan blive brun, og hvordan et karmin-stop forhindrer det.

### Ser falsk ud

- Gult øverst, rødt nederst
- Rød, der toner direkte ud i et brunligt sort
- Et køligt citrongult med grøn tone
- Ensartet farve fra kant til kant, intet varmt punkt
- Flammefarver på hvid baggrund

### Ser varm ud

- Blegeste farve ved kilden, rød i spidserne
- Rød til karmin, så til forkullet
- Et varmt gyldengult som #ffd23f
- Én lys kerne, som alt toner ud fra
- Ild, der gløder frem af mørket

## En animeret ildgradient i CSS

Et langsomt drift opad sælger ideen om flamme bedre end noget hurtigt flimmer. Gør gradienten dobbelt så høj som elementet, og flyt den blidt op og ned. Tag hensyn til besøgende, der har bedt om mindre bevægelse, som beskrevet i [reduceret bevægelse](https://gradiently.design/da/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 falder til ro hvert sjette sekund. Det er billigt at animere `background-position`. Til tungere effekter, se noterne om ydeevne i guiden til animerede gradienter.

Flere loops og deres afvejninger findes i [CSS animeret gradient](https://gradiently.design/da/guide/css-animated-gradient).

## Ord og tilbud på en ildgradient

Ild siger hast, energi og varme, så den bærer helt naturligt lynsalg, stærke menuer, træningsudfordringer og alt med en deadline. Skriftfarven afhænger af, hvor ordene lander: Et dybt trækul eller en glødebrun læses på den gyldne bund, og hvid eller varm creme læses på de røde og mørke dele. Undgå at lægge ord hen over den orange midte, hvor ingen af delene virker særlig godt.

Et socialt opslag i højformat med varm rød og orange baggrund og overskriften Sidste 48 timer i cremefarvet skrift

Et salgsopslag i højformat. Den hastende linje sidder på den mørke glødende, og det varmeste lys holder sig fri af ordene.

Mere om layouts, der sælger, finder du i [design af salgsopslag](https://gradiently.design/da/guide/sale-post-design). Hvis du hellere vil slippe for at lægge det ud i hånden, kan Gradiently Designer tage en enkelt linjes brief som »vinterudsalget slutter søndag«, spørge, hvad den mangler, skrive ordene og sætte opslaget op i din Mark og derefter lave story- og kvadratversionerne også.

## FAQ

### Hvilke farver er der i en ildgradient?

Bleg gul (#fff3b0), gyldengul (#ffd23f), orange (#ff8c1a), flammerød (#e8361c) og en dyb karmin eller forkullet til slut. Brug dem i den rækkefølge fra flammens bund.

### Hvilken vej skal en flammegradient gå?

Nedefra og op med den blegeste farve i bunden. I CSS angiver `linear-gradient(0deg, …)` det nederste stop først.

### Hvordan undgår jeg, at en ildgradient bliver brun?

Gå fra rød til en dyb karmin som #b3001b, før du når næsten sort, i stedet for direkte fra rød til sort.

### Hvad bruges en blå flammegradient til?

En blå gasflamme brænder som regel varmere end en gul træflamme, så den passer til tech, videnskab, energi og alt, der skal føles intenst, men køligt. Lad den løbe fra næsten hvid i bunden gennem himmelblå til dyb marineblå.

### Kan jeg animere en ildgradient uden JavaScript?

Ja. Gør baggrunden dobbelt så høj med `background-size: 100% 200%`, og animer `background-position` langsomt, og slå det fra for `prefers-reduced-motion`.