# Eldgradient: flamfärger från glöd till lågor

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

Lågor har en fast färgordning, och en eldgradient ser bara het ut om den följer den. Här är ordningen, koder för alla slags eldar och en fladdrande rörelse du animerar med några rader.

## The short version

- En eldgradient följer ordningen i en verklig låga: blekgult nära basen, sedan orange, sedan rött i topparna, och blekande ut i mörk rök.
- De hetaste delarna av en eld ser blekast ut, så det ljusaste färgstoppet hör hemma där hettan kommer ifrån, inte vid kanten.
- I CSS börjar `linear-gradient(0deg, …)` nere vid botten, vilket är där en låga börjar.
- Glöd och kol passar radiella gradienter som lyser från en het mitt ut i nästan svart.
- Mörk text syns på den gula delen av en eldgradient, och vit eller krämfärgad text syns på de röda och mörka delarna.

En **eldgradient** går från blekgult, nästan vitt, vid lågans bas, via klarorange, till djupt rött i topparna och sedan ut i rökens eller nattens mörker. Följ den ordningen så läses gradienten som hetta direkt. Vänd på den, med gult högst upp, och den ser ut som en solnedgång i stället. Nedan finns lågans zoner som färger, kopierbara koder från pyrande glöd till full eldsvåda och en mjuk CSS-fladdring.

## Läs en låga nerifrån och upp

Glödande material byter färg med temperaturen: ju hetare, desto blekare och vitare ser det ut, och när det svalnar glider det genom gult och orange till en matt röd. I en vedeld betyder det att det blekaste ljuset sitter lågt, nära bränslet, och det röda i de fladdrande topparna. En gaslåga brinner rent, nästan utan glödande sot, så den visar det blå ljuset från själva gasen som brinner.

| Zon | Färg | Hex |
| --- | --- | --- |
| Kärnan i en gaslåga | Blå | `#38bdf8` till `#1d4ed8` |
| Basen i en vedlåga | Blekgul, nästan vit | `#fff3b0` |
| Nedre delen | Gyllengul | `#ffd23f` |
| Mitten | Orange | `#ff8c1a` |
| Topparna | Lågröd | `#e8361c` |
| Svalnande kant | Karmosin till glöd | `#b3001b` till `#7f1d1d` |
| Rök och natt | Förkolnad | `#1c0606` |

En låga som en lista med färgstopp. De flesta eldgradienter använder fyra eller fem av dem, i den här ordningen.

- Vitglödgning: #fff3b0
- Gyllene låga: #ffd23f
- Orange låga: #ff8c1a
- Lågröd: #e8361c
- Karmosin: #b3001b
- Glöd: #7f1d1d
- Förkolnad: #1c0606

Eldpaletten från hetast till svalast. Notera att det inte finns något brunt: går du från rött till mörkt via djup karmosin fortsätter det att glöda.

## Koder för flamgradienter: lägereld till eldsvåda

Dessa är vertikala och börjar nere. I CSS pekar `0deg` uppåt, så första färgstoppet är lågans bas. En lägereld behåller en mjuk guldbas och en lång röd uttoning. En eldsvåda är kortare, högljuddare och mer mättad. Vitglödgning är hur insidan av en ugn ser ut.

- Lägereld, från bas till topp: `linear-gradient(0deg, #fff3b0 0%, #ffd23f 18%, #ff8c1a 45%, #e8361c 72%, #5c0d0d 100%)`
- Eldsvåda: `linear-gradient(0deg, #ffe066 0%, #ff9f1c 35%, #ff4d00 70%, #b3001b 100%)`
- Vitglödgning: `radial-gradient(circle at 50% 70%, #ffffff 0%, #fff7cc 20%, #ffc53d 45%, #ff6a00 75%, #a11a00 100%)`
- Blå gaslåga: `linear-gradient(0deg, #e0f7ff 0%, #38bdf8 25%, #1d4ed8 60%, #0b1033 100%)`

Fyra lågor. Den blå bryter mot den varma regeln med avsikt: en ren gaslåga brinner oftast hetare än en gul, och den passar teknik och vetenskap mycket bättre än orange.

## Gradienter för glöd, kol och lava

Alla eldmotiv behöver inte lågor. Glöd och kol är eld i vila: mest mörka, med en het kärna som lyser igenom. De känns dystra och premium, och de lämnar mer lugn yta åt ord än en full eldsvåda. Lava ligger mittemellan, en mörk skorpa som spruckit upp av en ljus ådra. De fungerar bäst som radiella gradienter, som lyser utåt på det sätt hetta gör.

- Glödande glöd: `radial-gradient(ellipse at 50% 100%, #ff7a18 0%, #c2410c 20%, #7f1d1d 45%, #1c0606 80%)`
- Het kolbit: `radial-gradient(circle at 50% 60%, #ff4d00 0%, #9a1b0b 25%, #2b0a05 55%, #0a0303 85%)`
- Lavaflöde: `linear-gradient(135deg, #1a0505 0%, #7a0f0f 35%, #ff3d00 60%, #ffb000 80%, #2a0808 100%)`

Eld i vila. Glödgradienten lyser upp från nederkanten, vilket ger en perfekt scen för en produkt eller en rubrik ovanför.

Vill du ha värme utan dramatiken tar de separata samlingarna [röd gradient](https://gradiently.design/sv/guide/red-gradient), [orange gradient](https://gradiently.design/sv/guide/orange-gradient) och [gul gradient](https://gradiently.design/sv/guide/yellow-gradient) var sin del av lågan och går längre med den.

## Därför ser vissa eldgradienter fel ut

Eld är en av de få gradienter som folk bedömer direkt, eftersom alla har stirrat in i en verklig. Tre misstag avslöjar den: ordningen är fel, den mörka änden blir brun, eller så är gulet så grönaktigt att det läses som syra snarare än hetta. [Geggiga gradienter](https://gradiently.design/sv/guide/muddy-gradients) förklarar varför rött som tonar mot svart kan bli brunt, och hur ett karmosinfärgat stopp förhindrar det.

### Ser falskt ut

- Gult överst, rött nederst
- Rött som tonar rakt ner i brunaktigt svart
- Ett kyligt citrongult med grön ton
- Jämn färg från kant till kant, ingen het punkt
- Lågfärger på vit bakgrund

### Ser hett ut

- Blekaste färgen vid källan, rött i topparna
- Rött till karmosin, sedan till förkolnat
- Ett varmt gyllengult som #ffd23f
- En ljus kärna som allt tonar ut från
- Eld som lyser ur mörkret

## En animerad eldgradient i CSS

En långsam drift uppåt säljer idén om låga bättre än någon snabb fladdring. Gör gradienten dubbelt så hög som elementet och flytta den försiktigt upp och ner. Ta hänsyn till besökare som bett om mindre rörelse, som beskrivs i [reducerad rörelse](https://gradiently.design/sv/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; }
}
```

Lågan stiger och lägger sig var sjätte sekund. Att animera `background-position` är billigt. För tyngre effekter, se prestandanoteringarna i guiden om animerade gradienter.

Fler loopar och deras avvägningar finns i [animerad gradient med CSS](https://gradiently.design/sv/guide/css-animated-gradient).

## Ord och erbjudanden på en eldgradient

Eld säger brådska, energi och hetta, så den bär naturligt blixtrea, starka menyer, träningsutmaningar och allt med en deadline. Textfärgen beror på var orden hamnar: en djup kolgrå eller glödbrun syns mot den gyllene basen, och vitt eller varmt kräm syns mot de röda och mörka delarna. Undvik att lägga text över den orange mitten, där ingen av dem fungerar särskilt bra.

Ett stående socialt inlägg med varm röd och orange bakgrund och rubriken Sista 48 timmarna i krämfärgad text

Ett stående reainlägg. Den brådskande raden ligger på den mörka glödänden. Det varmaste ljuset hålls borta från orden.

Mer om layouter som säljer finns i [formgivning av reainlägg](https://gradiently.design/sv/guide/sale-post-design). Vill du slippa lägga ut det för hand kan Gradiently Designer ta en enradsbeskrivning som ”vinterreorna slutar på söndag”, fråga vad den behöver, skriva orden och sätta inlägget i din Mark, och sedan göra story- och kvadratversionerna också.

## FAQ

### Vilka färger ingår i en eldgradient?

Blekgult (#fff3b0), gyllengult (#ffd23f), orange (#ff8c1a), lågrött (#e8361c) och ett djupt karmosin eller förkolnat som avslutning. Använd dem i den ordningen från lågans bas.

### Åt vilket håll ska en flamgradient gå?

Nerifrån och upp, med den blekaste färgen vid basen. I CSS listar `linear-gradient(0deg, …)` det nedersta stoppet först.

### Hur hindrar jag en eldgradient från att bli brun?

Gå från rött till ett djupt karmosin som #b3001b innan du når nästan svart, i stället för rakt från rött till svart.

### Vad används en blå flamgradient till?

En blå gaslåga brinner oftast hetare än en gul vedlåga, så den passar teknik, vetenskap, energi och allt som ska kännas intensivt men svalt. Låt den gå från nästan vitt vid basen via himmelsblått till djup marinblå.

### Kan jag animera en eldgradient utan JavaScript?

Ja. Gör bakgrunden dubbelt så hög med `background-size: 100% 200%` och animera `background-position` långsamt, och stäng av den för `prefers-reduced-motion`.