# Feuer Farbverlauf: Flammen-Codes von Glut bis Brand

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

Flammen haben eine feste Farbreihenfolge, und ein Feuer Farbverlauf wirkt nur heiß, wenn er ihr folgt. Hier ist diese Reihenfolge, dazu Codes für jede Art Feuer und ein Flackern, das du in wenigen Zeilen animierst.

## The short version

- Ein Feuer Farbverlauf folgt der Reihenfolge einer echten Flamme: helles Gelb nahe der Basis, dann Orange, dann Rot an den Spitzen, auslaufend in dunklen Rauch.
- Die heißesten Stellen eines Feuers wirken am hellsten, der hellste Stopp gehört also an die Hitzequelle, nicht an den Rand.
- In CSS beginnt `linear-gradient(0deg, …)` unten, und dort beginnt auch eine Flamme.
- Glut und Kohlen passen zu radialen Verläufen, die von einem heißen Zentrum in fast Schwarz glühen.
- Dunkle Schrift liest sich auf dem gelben Teil eines Feuer Farbverlaufs, weiße oder cremefarbene auf den roten und dunklen Teilen.

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.

| Zone | Farbe | Hex |
| --- | --- | --- |
| Kern einer Gasflamme | Blau | `#38bdf8` bis `#1d4ed8` |
| Basis einer Holzflamme | Helles Gelb, fast weiß | `#fff3b0` |
| Unterer Körper | Goldgelb | `#ffd23f` |
| Mitte | Orange | `#ff8c1a` |
| Spitzen | Flammenrot | `#e8361c` |
| Abkühlender Rand | Karmesin bis Glut | `#b3001b` bis `#7f1d1d` |
| Rauch und Nacht | Holzkohle | `#1c0606` |

Eine Flamme als Liste von Stopps. Die meisten Feuer-Verläufe nutzen vier oder fünf davon, in dieser Reihenfolge.

- Weißglut: #fff3b0
- Goldene Flamme: #ffd23f
- Orange Flamme: #ff8c1a
- Flammenrot: #e8361c
- Karmesin: #b3001b
- Glut: #7f1d1d
- Holzkohle: #1c0606

Die Feuerpalette vom heißesten zum kühlsten Ton. Beachte, dass es kein Braun gibt: Der Weg von Rot ins Dunkle über tiefes Karmesin hält sie glühend.

## 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.

- Lagerfeuer, von der Basis zur Spitze: `linear-gradient(0deg, #fff3b0 0%, #ffd23f 18%, #ff8c1a 45%, #e8361c 72%, #5c0d0d 100%)`
- Flammenmeer: `linear-gradient(0deg, #ffe066 0%, #ff9f1c 35%, #ff4d00 70%, #b3001b 100%)`
- Weißglut: `radial-gradient(circle at 50% 70%, #ffffff 0%, #fff7cc 20%, #ffc53d 45%, #ff6a00 75%, #a11a00 100%)`
- Blaue Gasflamme: `linear-gradient(0deg, #e0f7ff 0%, #38bdf8 25%, #1d4ed8 60%, #0b1033 100%)`

Vier Flammen. Die blaue bricht die Wärmeregel mit Absicht: Eine saubere Gasflamme brennt meist heißer als eine gelbe und passt viel besser zu Tech und Wissenschaft als Orange.

## 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.

- Glühende Glut: `radial-gradient(ellipse at 50% 100%, #ff7a18 0%, #c2410c 20%, #7f1d1d 45%, #1c0606 80%)`
- Heiße Kohle: `radial-gradient(circle at 50% 60%, #ff4d00 0%, #9a1b0b 25%, #2b0a05 55%, #0a0303 85%)`
- Lavastrom: `linear-gradient(135deg, #1a0505 0%, #7a0f0f 35%, #ff3d00 60%, #ffb000 80%, #2a0808 100%)`

Feuer in Ruhe. Der Glut-Verlauf glüht vom unteren Rand nach oben, eine perfekte Bühne für ein Produkt oder eine Überschrift darüber.

Willst du Wärme ohne Drama, nehmen sich die eigenen Sammlungen [roter Farbverlauf](https://gradiently.design/de/guide/red-gradient), [oranger Farbverlauf](https://gradiently.design/de/guide/orange-gradient) und [gelber Farbverlauf](https://gradiently.design/de/guide/yellow-gradient) 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](https://gradiently.design/de/guide/muddy-gradients) erklärt, warum Rot, das in Schwarz ausläuft, braun werden kann, und wie ein Karmesin-Stopp es verhindert.

### Wirkt unecht

- Gelb oben, Rot unten
- Rot, das direkt in bräunliches Schwarz ausläuft
- Ein kühles Zitronengelb mit Grünstich
- Gleichmäßige Farbe von Rand zu Rand, kein heißer Punkt
- Flammenfarben auf weißem Hintergrund

### Wirkt heiß

- Hellste Farbe an der Quelle, Rot an den Spitzen
- Rot in Karmesin, dann in Holzkohle
- Ein warmes Goldgelb wie #ffd23f
- Ein heller Kern, von dem alles ausläuft
- Feuer, das aus der Dunkelheit glüht

## 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](https://gradiently.design/de/guide/reduced-motion) beschrieben.

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

Die Flamme steigt und beruhigt sich alle sechs Sekunden. Das Animieren von `background-position` ist günstig; für aufwendigere Effekte sieh die Leistungshinweise im Leitfaden zu animierten Verläufen.

Weitere Schleifen und ihre Abwägungen stehen unter [CSS animierter Verlauf](https://gradiently.design/de/guide/css-animated-gradient).

## 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.

Ein Social-Post im Hochformat mit warmem rotem und orangem Hintergrund und der Überschrift Nur noch 48 Stunden in cremefarbener Schrift

Ein Sale-Post im Hochformat. Die dringende Zeile sitzt am dunklen Glutende; das wärmste Licht bleibt von den Worten fern.

Mehr zu Layouts, die verkaufen, findest du unter [Sale-Post Design](https://gradiently.design/de/guide/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.

## FAQ

### Welche Farben stecken in einem Feuer Farbverlauf?

Helles Gelb (#fff3b0), Goldgelb (#ffd23f), Orange (#ff8c1a), Flammenrot (#e8361c) und ein tiefes Karmesin oder Holzkohle zum Abschluss. Nutze sie in dieser Reihenfolge ab der Basis der Flamme.

### In welche Richtung sollte ein Flammen Farbverlauf gehen?

Von unten nach oben, mit der hellsten Farbe an der Basis. In CSS nennt `linear-gradient(0deg, …)` den unteren Stopp zuerst.

### Wie verhindere ich, dass ein Feuer Farbverlauf braun wird?

Geh von Rot in ein tiefes Karmesin wie #b3001b, bevor du fast Schwarz erreichst, statt direkt von Rot zu Schwarz.

### Wofür wird ein blauer Flammen Farbverlauf genutzt?

Eine blaue Gasflamme brennt meist heißer als eine gelbe Holzflamme und passt deshalb zu Tech, Wissenschaft, Energie und allem, das intensiv, aber kühl wirken soll. Lass ihn von fast Weiß an der Basis über Himmelblau zu tiefem Marineblau laufen.

### Kann ich einen Feuer Farbverlauf ohne JavaScript animieren?

Ja. Mache den Hintergrund mit `background-size: 100% 200%` doppelt so hoch, animiere `background-position` langsam und schalte es für `prefers-reduced-motion` ab.