Ildgradient: flammekoder fra gløder til bål

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.

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.

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.

Hvis du vil have varme uden dramaet, tager de separate samlinger rød gradient, orange gradient og gul 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 forklarer, hvorfor rød, der toner ud i sort, kan blive brun, og hvordan et karmin-stop forhindrer det.

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.

.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 loops og deres afvejninger findes i CSS animeret 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.

Mere om layouts, der sælger, finder du i design af salgsopslag. 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å.