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

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.

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.

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.

Vill du ha värme utan dramatiken tar de separata samlingarna röd gradient, orange gradient och gul 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 förklarar varför rött som tonar mot svart kan bli brunt, och hur ett karmosinfärgat stopp förhindrar det.

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.

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

Fler loopar och deras avvägningar finns i animerad gradient med CSS.

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.

Mer om layouter som säljer finns i formgivning av reainlägg. 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å.