Gradiente fuoco: codici di fiamma dalla brace al rogo

Un gradiente fuoco va dal giallo pallido, quasi bianco, alla base della fiamma, passa per un arancione acceso e arriva al rosso profondo in punta, per poi scendere nel buio del fumo o della notte. Segui quell’ordine e il gradiente sembra subito calore. Invertilo, con il giallo in alto, e sembrerà invece un tramonto. Qui sotto trovi le zone della fiamma come colori, codici da copiare dalla brace che cova al rogo pieno e un delicato sfarfallio in CSS.

Leggi una fiamma dal basso verso l’alto

Un materiale incandescente cambia colore con la temperatura: più è caldo, più appare pallido e bianco, e raffreddandosi scivola attraverso giallo e arancione fino a un rosso spento. In un fuoco di legna significa che la luce più pallida sta in basso, vicino al combustibile, e il rosso sta sulle punte che guizzano. Una fiamma a gas brucia in modo pulito, con quasi nessuna fuliggine incandescente, e mostra quindi la luce blu del gas stesso che brucia.

Codici per gradienti di fiamma: dal falò al rogo

Questi sono verticali e partono dal basso. In CSS 0deg punta in alto, quindi il primo stop è la base della fiamma. Un falò tiene una base dorata morbida e una lunga sfumatura rossa; un rogo è più corto, più forte e più saturo; il calore bianco è l’aspetto dell’interno di una fornace.

Gradienti di brace, carbone e lava

Non ogni design di fuoco ha bisogno di fiamme. Brace e carboni sono il fuoco a riposo: per lo più scuri, con un nucleo caldo che traspare. Hanno un tono cupo e premium, e lasciano più spazio calmo alle parole di un rogo pieno. La lava sta a metà, una crosta scura spaccata da una vena luminosa. Funzionano meglio come gradienti radiali, che si irradiano verso l’esterno come fa il calore.

Se vuoi calore senza dramma, le raccolte separate di gradiente rosso, gradiente arancione e gradiente giallo prendono ciascuna una parte della fiamma e la sviluppano di più.

Perché alcuni gradienti fuoco sembrano sbagliati

Il fuoco è uno dei pochi gradienti che le persone giudicano all’istante, perché tutti ne hanno guardato uno vero. Tre errori lo tradiscono: l’ordine è sbagliato, l’estremo scuro diventa marrone, o il giallo è così verdastro da sembrare acido anziché caldo. Gradienti sporchi spiega perché il rosso che sfuma nel nero può virare al marrone e come uno stop cremisi lo evita.

Un gradiente fuoco animato in CSS

Una lenta deriva verso l’alto rende l’idea della fiamma meglio di qualsiasi sfarfallio veloce. Rendi il gradiente alto il doppio dell’elemento, poi spostalo dolcemente su e giù. Rispetta chi ha chiesto meno movimento, come descritto in movimento ridotto.

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

Altri cicli e i loro compromessi sono in gradiente animato CSS.

Parole e offerte su un gradiente fuoco

Il fuoco dice urgenza, energia e calore, quindi porta naturalmente vendite lampo, menù piccanti, sfide di allenamento e tutto ciò che ha una scadenza. Il colore del testo dipende da dove cadono le parole: un carbone scuro o un marrone brace si legge sulla base dorata, mentre il bianco o la crema calda si legge sulle parti rosse e scure. Evita di mettere parole sul centro arancione, dove nessuno dei due funziona particolarmente bene.

Per altri layout che vendono, vedi design dei post per i saldi. Se preferisci non impaginare a mano, il Designer di Gradiently può prendere un brief di una riga come «saldi d’inverno fino a domenica», chiederti ciò che gli serve, scrivere le parole e comporre il post nel tuo Mark, poi creare anche le versioni storia e quadrata.