# Gradiente grigio: codici neutri che non annoiano

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

Il grigio è il colore che si sceglie quando non si vuole scegliere. Con una dominante, una luce e un solo accento, diventa uno degli sfondi più sicuri di sé che esistano.

## The short version

- Un gradiente grigio sembra curato quando i suoi grigi hanno una leggera dominante, fredda verso il blu o calda verso il marrone.
- Mescolare grigi caldi e freddi in un solo gradiente lo fa sembrare sporco, quindi scegli una temperatura e mantienila.
- I grigi metallici nascono da una banda netta e chiara tra punti più scuri, che imita la luce che colpisce una superficie.
- I gradienti grigi formano bande più visibili di quelli colorati, e di solito si rimedia con uno strato di grana fine.
- Un solo colore d’accento saturo su un gradiente grigio fa sembrare voluto l’intero design.

Un **gradiente grigio** smette di sembrare noioso nel momento in cui i suoi grigi hanno una dominante. I grigi neutri puri, con rosso, verde e blu uguali, sembrano piatti e digitali. Spostali leggermente verso il freddo, il blu, e ottieni nebbia, ardesia e acciaio; spostali verso il caldo, il marrone, e ottieni pietra, cemento e peltro. Aggiungi una luce che arriva da qualche parte e un colore d’accento, e il grigio diventa calmo, moderno e discretamente sicuro. Seguono i codici per ciascuno.

## Grigio caldo o grigio freddo: sceglierne uno

I grigi freddi sembrano tecnici, puliti e precisi. I grigi caldi sembrano architettonici, naturali e morbidi. Entrambi funzionano benissimo da soli. Insieme in un gradiente litigano e il risultato sembra una macchia. Guarda i campioni qui sotto a coppie: la riga in alto vira al blu, quella in basso al marrone, e la differenza è piccola ma evidente una volta che l’hai vista.

- Nebbia: #f4f6f8
- Foschia fredda: #aeb6be
- Ardesia: #4a535d
- Tempesta: #22272c
- Gesso: #f3f1ee
- Cemento: #b5b1ab
- Peltro: #5f5b56
- Grafite: #1c1c1e

Quattro grigi freddi e quattro caldi. La grafite è vicina al neutro, per questo si abbina a quasi tutto.

## Codici di gradiente grigio freddo e caldo

Nebbia e ardesia sono la coppia fredda: nebbia per layout chiari e aerei, ardesia per quelli scuri e seri. Tempesta aggiunge una nuvola illuminata, che dà vera profondità a un grigio scuro. Pietra e cemento sono la coppia calda, più vicini ai materiali da costruzione, e la grafite è il quasi nero che puoi usare al posto del nero puro.

- Nebbia: `linear-gradient(180deg, #f4f6f8 0%, #d9dee3 55%, #aeb6be 100%)`
- Ardesia: `linear-gradient(160deg, #2b3138 0%, #4a535d 50%, #7d8792 100%)`
- Tempesta: `radial-gradient(ellipse at 70% 20%, #9aa3ad 0%, #5b636c 40%, #22272c 100%)`
- Pietra calda: `linear-gradient(160deg, #f3f1ee 0%, #d6d1ca 50%, #9e978e 100%)`
- Cemento: `linear-gradient(135deg, #8f8b86 0%, #b5b1ab 50%, #d8d5d0 100%)`
- Grafite: `linear-gradient(160deg, #1c1c1e 0%, #2f2f33 50%, #4a4a50 100%)`

Sei grigi con una temperatura. Tempesta e grafite reggono il testo bianco; nebbia, pietra e cemento vogliono testo scuro.

Se vuoi scendere ancora, i codici del [gradiente nero](https://gradiently.design/it/guide/black-gradient) proseguono dalla grafite. Per i design costruiti con una sola tonalità a molti livelli di luminosità, vedi il [gradiente monocromatico](https://gradiently.design/it/guide/monochrome-gradient).

## Argento, acciaio e altri gradienti grigi metallici

Il metallo non è un colore, è un riflesso. Un **gradiente argento** funziona grazie a una banda netta e chiara stretta tra punti più scuri, come la luce che colpisce una superficie curva. Il canna di fucile usa lo stesso trucco a un livello più scuro, e l’acciaio spazzolato aggiunge sottili linee parallele. Sono audaci, quindi usali per un badge, una targa del titolo o un solo pannello e non per un’intera pagina.

- Argento lucido: `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`
- Canna di fucile: `linear-gradient(160deg, #1f2428 0%, #3a4147 45%, #5d666e 60%, #2a3035 100%)`
- Peltro: `linear-gradient(135deg, #5f5b56 0%, #8c8781 45%, #c2bdb6 55%, #77726c 100%)`
- Linee di acciaio spazzolato: `repeating-linear-gradient(90deg, #c7cbd0 0px, #d9dce0 2px, #b8bdc3 4px)`

Grigi metallici. Più stretta è la banda chiara, più il metallo sembra lucido; allargala e diventa satinato.

L’acciaio spazzolato rende meglio quando le linee stanno su un gradiente morbido illuminato e non da sole. Bastano due strati:

```css
.steel {
  background-color: #b9bec4;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, #9ea4ab 0%, #e8eaed 45%, #b9bec4 55%, #7f868e 100%);
}
```

Sottili linee bianche ogni tre pixel su una fusione argento illuminata. Cambia l’angolo del secondo strato per spostare dove cade la luce.

## Grigio più un colore

Pochi sfondi esaltano un singolo colore forte come il grigio. L’accento sembra più brillante sul neutro che su altri colori, quindi ne basta poco: una parola, un pulsante, una riga. Scegli l’accento in base al settore e all’atmosfera.

| Accento | Esadecimale | Suggerisce | Adatto a |
| --- | --- | --- | --- |
| Blu elettrico | `#3b82f6` | Tecnico, affidabile | Software, fintech, dati |
| Arancione segnale | `#f97316` | Industriale, energico | Edilizia, utensili, logistica |
| Lime | `#a3e635` | Sportivo, fresco | Fitness, corsa, attrezzatura outdoor |
| Rosa cipria | `#f2c6c2` | Delicato, alla moda | Moda, bellezza, lifestyle |
| Ottone | `#c9a24a` | Premium, classico | Architettura, orologi, hotel |

Usa grigi freddi con blu e lime, grigi caldi con arancione, rosa cipria e ottone.

Schemi completi costruiti così si trovano in [le palette di colori tecnologici](https://gradiently.design/it/guide/tech-color-palettes) e [le palette di colori neutri](https://gradiently.design/it/guide/neutral-color-palettes).

## Il grigio che sembra voluto

### Sembra incompiuto

- Grigi neutri puri senza dominante
- Grigi caldi e freddi in una sola fusione
- Bande visibili su una superficie liscia
- Tre o quattro colori d’accento
- Testo grigio medio su sfondo grigio medio

### Sembra voluto

- Una leggera dominante blu o marrone in tutto
- Una sola temperatura dall’inizio alla fine
- Una grana fine su tutto il gradiente
- Un solo accento, usato con parsimonia
- Testo quasi bianco o quasi nero, mai grigio medio

Le bande meritano un avviso a parte. I grigi non hanno una tonalità che distragga l’occhio, quindi ogni passaggio di un gradiente liscio si vede, soprattutto su schermi grandi e dopo la compressione. Uno strato leggero di rumore lo nasconde; [la texture di rumore in CSS](https://gradiently.design/it/guide/css-noise-texture) ha uno snippet e [le bande nei gradienti](https://gradiently.design/it/guide/gradient-banding) spiega perché accadono.

## Gradienti grigi nei siti web e nel tema scuro

Sul web i gradienti grigi lavorano meglio in silenzio. Un gradiente nebbia dietro una sezione di funzioni la separa da una pagina bianca senza un bordo netto. Nel tema scuro, un gradiente grafite che si schiarisce un poco verso l’alto di una scheda le dà profondità, dove un grigio piatto sembrerebbe un buco. Tieni piccola la variazione tra i punti, pochi punti percentuali di luminosità, così il gradiente si legge come luce e non come decorazione. [Il design per il tema scuro](https://gradiently.design/it/guide/dark-mode-design) tratta le regole più ampie per le interfacce scure, dai colori delle superfici al contrasto.

## Sfondi sfumati grigi nella pratica

Architetti, studi di ingegneria e aziende software usano il grigio perché lascia parlare il lavoro. Un gradiente ardesia con testo bianco e un accento blu rende preciso l’annuncio di un progetto; un gradiente pietra calda con testo grafite dà a una copertina di portfolio un aspetto tattile. [Il branding di uno studio di architettura](https://gradiently.design/it/guide/architecture-firm-branding) mostra fin dove arriva una palette sobria.

Un’immagine larga per LinkedIn con sfondo sfumato grigio ardesia freddo e le parole Costruito per durare in bianco

Un’immagine di link LinkedIn su un Mark ardesia. Testo bianco sul lato più scuro; l’area illuminata resta libera dalle parole.

Gli sfondi discreti sono dove un sistema di design ripaga. In Gradiently un Mark grigio porta la sua grana, che tiene a bada le bande, e l’inchiostro automatico sceglie testo chiaro o scuro riga per riga mentre il grigio cambia lungo il fotogramma.

## FAQ

### Come faccio a rendere meno noioso un gradiente grigio?

Dai ai grigi una leggera dominante fredda o calda, illumina il gradiente da un lato, aggiungi una grana fine e usa un solo colore d’accento saturo.

### Qual è il CSS per un gradiente argento?

Usa una banda chiara tra punti più scuri, ad esempio `linear-gradient(135deg, #e8eaed 0%, #b9bec4 25%, #f5f6f7 50%, #9ea4ab 75%, #d6d9dd 100%)`.

### Si dice gradiente grigio o gray gradient?

Entrambe le grafie inglesi sono corrette: gray è quella americana e grey quella britannica, e indicano esattamente lo stesso colore.

### Quale colore sta meglio con un gradiente grigio?

Un solo accento forte: blu elettrico o lime con i grigi freddi, arancione segnale, rosa cipria o ottone con i grigi caldi.

### Perché il mio gradiente grigio ha delle strisce?

Le fusioni grigie lisce mostrano ogni passaggio di colore, soprattutto dopo la compressione. Aggiungi uno strato leggero di rumore ed esporta come PNG.