Feuer Farbverlauf: Flammen-Codes von Glut bis Brand

Ein Feuer Farbverlauf läuft von hellem Gelb, fast Weiß, an der Basis der Flamme über leuchtendes Orange zu tiefem Rot an den Spitzen und dann ins Dunkel von Rauch oder Nacht. Folgst du dieser Reihenfolge, wirkt der Verlauf sofort als Hitze. Drehst du sie um, mit Gelb oben, sieht er stattdessen wie ein Sonnenuntergang aus. Unten findest du die Flammenzonen als Farben, kopierbare Codes von schwelender Glut bis zum Flammenmeer und ein sanftes CSS-Flackern.

Eine Flamme von unten nach oben lesen

Glühendes Material ändert seine Farbe mit der Temperatur: Je heißer, desto blasser und weißer, und beim Abkühlen gleitet es durch Gelb und Orange zu einem matten Rot. Bei einem Holzfeuer sitzt das hellste Licht tief, nahe am Brennstoff, und das Rot an den flackernden Spitzen. Eine Gasflamme brennt sauber, fast ohne glühenden Ruß, und zeigt daher das blaue Licht des brennenden Gases selbst.

Flammen Farbverlauf Codes: Lagerfeuer bis Flammenmeer

Diese laufen senkrecht und beginnen unten. In CSS zeigt 0deg nach oben, der erste Stopp ist also die Basis der Flamme. Ein Lagerfeuer behält eine weiche goldene Basis und ein langes rotes Auslaufen; ein Flammenmeer ist kürzer, lauter und gesättigter; Weißglut sieht aus wie das Innere eines Hochofens.

Glut, Kohle und Lava Farbverläufe

Nicht jedes Feuer-Design braucht Flammen. Glut und Kohlen sind Feuer in Ruhe: überwiegend dunkel, mit einem heißen Kern, der durchglüht. Sie wirken stimmungsvoll und hochwertig und lassen mehr ruhigen Raum für Worte als ein volles Flammenmeer. Lava liegt dazwischen, eine dunkle Kruste, von einer hellen Naht gespalten. Am besten funktionieren sie als radiale Verläufe, die nach außen glühen, wie es Hitze tut.

Willst du Wärme ohne Drama, nehmen sich die eigenen Sammlungen roter Farbverlauf, oranger Farbverlauf und gelber Farbverlauf jeweils einen Teil der Flamme vor und gehen damit weiter.

Warum manche Feuer Farbverläufe falsch aussehen

Feuer ist einer der wenigen Verläufe, die Menschen sofort beurteilen, denn jeder hat schon in ein echtes gestarrt. Drei Fehler verraten es: Die Reihenfolge stimmt nicht, das dunkle Ende wird braun, oder das Gelb hat so einen Grünstich, dass es wie Säure statt Hitze wirkt. Schlammige Farbverläufe erklärt, warum Rot, das in Schwarz ausläuft, braun werden kann, und wie ein Karmesin-Stopp es verhindert.

Ein animierter Feuer Farbverlauf in CSS

Ein langsames Aufwärtsdriften verkauft die Idee der Flamme besser als jedes schnelle Flackern. Mache den Verlauf doppelt so hoch wie das Element und bewege ihn sanft auf und ab. Nimm Rücksicht auf Besucher, die um weniger Bewegung gebeten haben, wie unter reduzierte Bewegung beschrieben.

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

Weitere Schleifen und ihre Abwägungen stehen unter CSS animierter Verlauf.

Worte und Angebote auf einem Feuer Farbverlauf

Feuer sagt Dringlichkeit, Energie und Hitze und trägt deshalb ganz natürlich Flash-Sales, scharfe Speisekarten, Workout-Challenges und alles mit einer Frist. Die Schriftfarbe hängt davon ab, wo die Worte landen: Tiefes Anthrazit oder Glutbraun liest sich auf der goldenen Basis, Weiß oder warmes Creme auf den roten und dunklen Teilen. Vermeide Worte quer über der orangen Mitte, wo keins von beiden besonders gut funktioniert.

Mehr zu Layouts, die verkaufen, findest du unter Sale-Post Design. Willst du nicht von Hand layouten: Der Designer von Gradiently kann ein Briefing in einer Zeile wie „Winter-Räumungsverkauf endet Sonntag“ aufnehmen, nachfragen, was er braucht, die Worte schreiben und den Post in deinem Mark setzen, und dann auch Story- und Quadrat-Versionen erstellen.