# Dégradé feu : codes de flamme de la braise au brasier

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

Les flammes ont un ordre de couleurs fixe, et un dégradé feu ne paraît brûlant que s’il le suit. Voici cet ordre, des codes pour chaque sorte de feu, et un scintillement animable en quelques lignes.

## The short version

- Un dégradé feu suit l’ordre d’une vraie flamme : jaune pâle près de la base, puis orange, puis rouge aux pointes, s’effaçant dans une fumée sombre.
- Les parties les plus chaudes d’un feu paraissent les plus pâles : l’arrêt le plus brillant va à la source de chaleur, pas au bord.
- En CSS, `linear-gradient(0deg, …)` part du bas, là où commence une flamme.
- Les braises et les charbons conviennent aux dégradés radiaux qui rayonnent d’un centre chaud vers un presque noir.
- Un texte foncé se lit sur la partie jaune d’un dégradé feu, et un texte blanc ou crème sur les parties rouges et sombres.

Un **dégradé feu** va du jaune pâle, presque blanc, à la base de la flamme, à travers un orange vif, jusqu’à un rouge profond aux pointes, puis dans le noir de la fumée ou de la nuit. Suivez cet ordre et le dégradé se lit aussitôt comme de la chaleur. Inversez-le, avec le jaune en haut, et il ressemble à un coucher de soleil. Voici les zones de la flamme en couleurs, des codes à copier de la braise couvante au plein brasier, et un doux scintillement CSS.

## Lire une flamme de bas en haut

Une matière incandescente change de couleur avec la température : plus elle est chaude, plus elle paraît pâle et blanche, et en refroidissant elle glisse par le jaune et l’orange vers un rouge terne. Dans un feu de bois, cela signifie que la lumière la plus pâle se tient en bas, près du combustible, et le rouge aux pointes vacillantes. Une flamme de gaz brûle proprement, presque sans suie incandescente : elle montre la lumière bleue du gaz qui brûle.

| Zone | Couleur | Hex |
| --- | --- | --- |
| Cœur d’une flamme de gaz | Bleu | `#38bdf8` à `#1d4ed8` |
| Base d’une flamme de bois | Jaune pâle, presque blanc | `#fff3b0` |
| Bas du corps | Jaune doré | `#ffd23f` |
| Milieu | Orange | `#ff8c1a` |
| Pointes | Rouge flamme | `#e8361c` |
| Bord qui refroidit | Cramoisi vers braise | `#b3001b` à `#7f1d1d` |
| Fumée et nuit | Charbon | `#1c0606` |

Une flamme en liste d’arrêts. La plupart des dégradés feu emploient quatre ou cinq de ceux-ci, dans cet ordre.

- Chaleur blanche: #fff3b0
- Flamme dorée: #ffd23f
- Flamme orange: #ff8c1a
- Rouge flamme: #e8361c
- Cramoisi: #b3001b
- Braise: #7f1d1d
- Charbon: #1c0606

La palette du feu du plus chaud au plus froid. Remarquez l’absence de brun : passer du rouge au sombre par un cramoisi profond le garde incandescent.

## Codes de dégradé de flamme : du feu de camp au brasier

Ils sont verticaux, à partir du bas. En CSS, `0deg` pointe vers le haut : le premier arrêt est donc la base de la flamme. Un feu de camp garde une base dorée douce et un long fondu rouge ; un brasier est plus court, plus fort et plus saturé ; la chaleur blanche est l’intérieur d’un four.

- Feu de camp, de la base à la pointe: `linear-gradient(0deg, #fff3b0 0%, #ffd23f 18%, #ff8c1a 45%, #e8361c 72%, #5c0d0d 100%)`
- Brasier: `linear-gradient(0deg, #ffe066 0%, #ff9f1c 35%, #ff4d00 70%, #b3001b 100%)`
- Chaleur blanche: `radial-gradient(circle at 50% 70%, #ffffff 0%, #fff7cc 20%, #ffc53d 45%, #ff6a00 75%, #a11a00 100%)`
- Bleu de flamme de gaz: `linear-gradient(0deg, #e0f7ff 0%, #38bdf8 25%, #1d4ed8 60%, #0b1033 100%)`

Quatre flammes. La bleue enfreint exprès la règle du chaud : une flamme de gaz propre brûle en général plus fort qu’une jaune, et convient bien mieux à la tech et à la science que l’orange.

## Dégradés de braise, de charbon et de lave

Tout design de feu n’a pas besoin de flammes. Les braises et les charbons sont le feu au repos : surtout sombres, avec un cœur chaud qui transparaît. Ils paraissent sombres et haut de gamme, et laissent plus d’espace calme aux mots qu’un plein brasier. La lave se tient entre les deux : une croûte sombre fendue par une veine brillante. Ils marchent mieux en dégradés radiaux, qui rayonnent vers l’extérieur comme la chaleur.

- Braises incandescentes: `radial-gradient(ellipse at 50% 100%, #ff7a18 0%, #c2410c 20%, #7f1d1d 45%, #1c0606 80%)`
- Charbon ardent: `radial-gradient(circle at 50% 60%, #ff4d00 0%, #9a1b0b 25%, #2b0a05 55%, #0a0303 85%)`
- Coulée de lave: `linear-gradient(135deg, #1a0505 0%, #7a0f0f 35%, #ff3d00 60%, #ffb000 80%, #2a0808 100%)`

Le feu au repos. Le dégradé de braises monte du bord inférieur, ce qui offre une scène idéale à un produit ou à un titre placé au-dessus.

Si vous voulez de la chaleur sans le drame, les collections séparées de [dégradé rouge](https://gradiently.design/fr/guide/red-gradient), [dégradé orange](https://gradiently.design/fr/guide/orange-gradient) et [dégradé jaune](https://gradiently.design/fr/guide/yellow-gradient) prennent chacune une partie de la flamme et vont plus loin avec elle.

## Pourquoi certains dégradés de feu paraissent faux

Le feu est l’un des rares dégradés que l’on juge instantanément, car tout le monde en a fixé un vrai. Trois erreurs le trahissent : l’ordre est faux, l’extrémité sombre vire au brun, ou le jaune est si verdâtre qu’il se lit comme de l’acide plutôt que de la chaleur. [Les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) expliquent pourquoi un rouge qui s’efface dans le noir peut virer au brun, et comment un arrêt cramoisi l’évite.

### Paraît faux

- Jaune en haut, rouge en bas
- Du rouge qui s’efface droit dans un noir brunâtre
- Un jaune citron froid, à reflet vert
- Une couleur uniforme d’un bord à l’autre, sans point chaud
- Des couleurs de flamme sur fond blanc

### Paraît brûlant

- La couleur la plus pâle à la source, le rouge aux pointes
- Du rouge au cramoisi, puis au charbon
- Un jaune doré chaud comme #ffd23f
- Un cœur brillant d’où tout s’efface
- Un feu qui rayonne dans l’obscurité

## Un dégradé de feu animé en CSS

Une lente dérive vers le haut vend mieux l’idée de flamme que n’importe quel scintillement rapide. Faites le dégradé deux fois plus haut que l’élément, puis déplacez-le doucement de haut en bas. Respectez les visiteurs qui ont demandé moins de mouvement, comme le décrit [le mouvement réduit](https://gradiently.design/fr/guide/reduced-motion).

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

La flamme monte et retombe toutes les six secondes. Animer `background-position` coûte peu ; pour des effets plus lourds, voir les notes de performance du guide des dégradés animés.

D’autres boucles et leurs compromis sont dans [le dégradé animé CSS](https://gradiently.design/fr/guide/css-animated-gradient).

## Des mots et des offres sur un dégradé feu

Le feu dit l’urgence, l’énergie et la chaleur : il porte donc naturellement les ventes flash, les menus épicés, les défis sportifs et tout ce qui a une échéance. La couleur de texte dépend de l’endroit où tombent les mots : un anthracite profond ou un brun braise se lit sur la base dorée, et du blanc ou une crème chaude sur les parties rouges et sombres. Évitez de poser des mots en travers du milieu orange, où aucun des deux ne marche particulièrement bien.

Un post social en portrait avec un fond rouge et orange chaud et le titre « Dernières 48 heures » en texte crème

Un post de soldes en portrait. La ligne d’urgence se pose sur l’extrémité sombre, braise ; la lumière la plus chaude reste loin des mots.

Pour en savoir plus sur les mises en page qui vendent, voir [le design d’un post de soldes](https://gradiently.design/fr/guide/sale-post-design). Si vous préférez ne pas le composer à la main, le Designer de Gradiently peut prendre un brief d’une ligne comme « la liquidation d’hiver se termine dimanche », demander ce qu’il lui faut, écrire les mots et composer le post dans votre Mark, puis créer aussi les versions story et carrée.

## FAQ

### Quelles couleurs composent un dégradé feu ?

Jaune pâle (#fff3b0), jaune doré (#ffd23f), orange (#ff8c1a), rouge flamme (#e8361c) et un cramoisi profond ou un charbon pour finir. Employez-les dans cet ordre à partir de la base de la flamme.

### Dans quel sens un dégradé de flamme doit-il aller ?

De bas en haut, avec la couleur la plus pâle à la base. En CSS, `linear-gradient(0deg, …)` liste d’abord l’arrêt du bas.

### Comment éviter qu’un dégradé de feu vire au brun ?

Passez du rouge à un cramoisi profond comme #b3001b avant d’atteindre le presque noir, plutôt que directement du rouge au noir.

### À quoi sert un dégradé de flamme bleue ?

Une flamme de gaz bleue brûle en général plus fort qu’une flamme de bois jaune : elle convient à la tech, à la science, à l’énergie et à tout ce qui veut paraître intense mais froid. Menez-la d’un presque blanc à la base, par un bleu ciel, jusqu’à un marine profond.

### Puis-je animer un dégradé de feu sans JavaScript ?

Oui. Faites le fond deux fois plus haut avec `background-size: 100% 200%` et animez `background-position` lentement, puis désactivez-le pour `prefers-reduced-motion`.