# Gradiente fuoco: codici di fiamma dalla brace al rogo

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

Le fiamme hanno un ordine fisso di colori, e un gradiente fuoco sembra caldo solo se lo segue. Ecco quell’ordine, i codici per ogni tipo di fuoco e uno sfarfallio che puoi animare in poche righe.

## The short version

- Un gradiente fuoco segue l’ordine di una fiamma vera: giallo pallido vicino alla base, poi arancione, poi rosso in punta, che sfuma nel fumo scuro.
- Le parti più calde di un fuoco sembrano le più pallide, quindi il punto più luminoso va alla fonte del calore, non al bordo.
- In CSS, `linear-gradient(0deg, …)` parte dal basso, che è dove parte una fiamma.
- Brace e carboni si prestano ai gradienti radiali che brillano da un centro caldo fino al quasi nero.
- Il testo scuro si legge sulla parte gialla di un gradiente fuoco, mentre il testo bianco o crema si legge sulle parti rosse e scure.

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.

| Zona | Colore | Esadecimale |
| --- | --- | --- |
| Cuore di una fiamma a gas | Blu | `#38bdf8` a `#1d4ed8` |
| Base di una fiamma di legna | Giallo pallido, quasi bianco | `#fff3b0` |
| Parte bassa | Giallo oro | `#ffd23f` |
| Centro | Arancione | `#ff8c1a` |
| Punte | Rosso fiamma | `#e8361c` |
| Bordo che si raffredda | Dal cremisi alla brace | `#b3001b` a `#7f1d1d` |
| Fumo e notte | Carbone | `#1c0606` |

Una fiamma come elenco di stop. La maggior parte dei gradienti fuoco ne usa quattro o cinque, in quest’ordine.

- Calore bianco: #fff3b0
- Fiamma dorata: #ffd23f
- Fiamma arancione: #ff8c1a
- Rosso fiamma: #e8361c
- Cremisi: #b3001b
- Brace: #7f1d1d
- Carbone: #1c0606

La palette del fuoco dal più caldo al più freddo. Nota che non c’è il marrone: passare dal rosso al buio attraverso un cremisi profondo la mantiene luminosa.

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

- Falò, dalla base alla punta: `linear-gradient(0deg, #fff3b0 0%, #ffd23f 18%, #ff8c1a 45%, #e8361c 72%, #5c0d0d 100%)`
- Rogo: `linear-gradient(0deg, #ffe066 0%, #ff9f1c 35%, #ff4d00 70%, #b3001b 100%)`
- Calore bianco: `radial-gradient(circle at 50% 70%, #ffffff 0%, #fff7cc 20%, #ffc53d 45%, #ff6a00 75%, #a11a00 100%)`
- Blu di fiamma a gas: `linear-gradient(0deg, #e0f7ff 0%, #38bdf8 25%, #1d4ed8 60%, #0b1033 100%)`

Quattro fiamme. Quella blu rompe di proposito la regola del caldo: una fiamma a gas pulita di solito brucia più calda di una gialla, e si adatta a tecnologia e scienza molto meglio dell’arancione.

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

- Brace incandescente: `radial-gradient(ellipse at 50% 100%, #ff7a18 0%, #c2410c 20%, #7f1d1d 45%, #1c0606 80%)`
- Carbone ardente: `radial-gradient(circle at 50% 60%, #ff4d00 0%, #9a1b0b 25%, #2b0a05 55%, #0a0303 85%)`
- Colata di lava: `linear-gradient(135deg, #1a0505 0%, #7a0f0f 35%, #ff3d00 60%, #ffb000 80%, #2a0808 100%)`

Il fuoco a riposo. Il gradiente di brace brilla dal bordo inferiore, e questo crea un palcoscenico perfetto per un prodotto o un titolo sopra di esso.

Se vuoi calore senza dramma, le raccolte separate di [gradiente rosso](https://gradiently.design/it/guide/red-gradient), [gradiente arancione](https://gradiently.design/it/guide/orange-gradient) e [gradiente giallo](https://gradiently.design/it/guide/yellow-gradient) 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](https://gradiently.design/it/guide/muddy-gradients) spiega perché il rosso che sfuma nel nero può virare al marrone e come uno stop cremisi lo evita.

### Sembra finto

- Giallo in alto, rosso in basso
- Rosso che sfuma dritto in un nero brunastro
- Un giallo limone freddo con una dominante verde
- Colore uniforme da bordo a bordo, senza punto caldo
- Colori di fiamma su sfondo bianco

### Sembra caldo

- Colore più pallido alla fonte, rosso in punta
- Rosso verso cremisi, poi verso carbone
- Un giallo oro caldo come #ffd23f
- Un nucleo luminoso da cui tutto sfuma
- Il fuoco che brilla dal buio

## 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](https://gradiently.design/it/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 fiamma sale e si assesta ogni sei secondi. Animare `background-position` costa poco; per effetti più pesanti, vedi le note sulle prestazioni nella guida ai gradienti animati.

Altri cicli e i loro compromessi sono in [gradiente animato CSS](https://gradiently.design/it/guide/css-animated-gradient).

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

Un post social verticale con sfondo rosso caldo e arancione e il titolo Ultime 48 ore in caratteri crema

Un post verticale per i saldi. La riga urgente sta sull’estremo scuro, quello di brace; la luce più calda resta lontana dalle parole.

Per altri layout che vendono, vedi [design dei post per i saldi](https://gradiently.design/it/guide/sale-post-design). 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.

## FAQ

### Quali colori ci sono in un gradiente fuoco?

Giallo pallido (#fff3b0), giallo oro (#ffd23f), arancione (#ff8c1a), rosso fiamma (#e8361c) e un cremisi profondo o carbone a chiudere. Usali in quest’ordine dalla base della fiamma.

### In che direzione deve andare un gradiente di fiamma?

Dal basso verso l’alto, con il colore più pallido alla base. In CSS `linear-gradient(0deg, …)` elenca per primo lo stop in basso.

### Come evito che un gradiente fuoco diventi marrone?

Passa dal rosso a un cremisi profondo come #b3001b prima di arrivare al quasi nero, invece di andare direttamente dal rosso al nero.

### A cosa serve un gradiente di fiamma blu?

Una fiamma a gas blu di solito brucia più calda di una fiamma gialla di legna, quindi si adatta a tecnologia, scienza, energia e a tutto ciò che vuole sembrare intenso ma freddo. Fallo andare dal quasi bianco alla base, attraverso l’azzurro cielo, fino al blu navy profondo.

### Posso animare un gradiente fuoco senza JavaScript?

Sì. Rendi lo sfondo alto il doppio con `background-size: 100% 200%` e anima lentamente `background-position`, poi disattivalo con `prefers-reduced-motion`.