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

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.

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.

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.

Si vous voulez de la chaleur sans le drame, les collections séparées de dégradé rouge, dégradé orange et dégradé jaune 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 expliquent pourquoi un rouge qui s’efface dans le noir peut virer au brun, et comment un arrêt cramoisi l’évite.

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.

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

D’autres boucles et leurs compromis sont dans le dégradé animé CSS.

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.

Pour en savoir plus sur les mises en page qui vendent, voir le design d’un post de soldes. 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.