Ildgradient: flammekoder fra glør til full brann

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.

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.

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.

Vil du ha varme uten dramatikken, tar samlingene rød gradient, oransje gradient og gul 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 forklarer hvorfor rødt som tones ut i svart kan bli brunt, og hvordan et karmosinstopp hindrer det.

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.

.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; }
}

Flere løkker og avveiningene deres finner du i animert gradient i CSS.

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.

Mer om oppsett som selger finner du i design av salgsinnlegg. 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å.