# Effetto testo cromato: scritte e sfondi metallici

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

Il cromo non è grigio. È uno specchio del mondo intorno, schiacciato sulla superficie di una lettera. Capito questo, un testo cromato convincente richiede un gradiente e pochi minuti.

## The short version

- Un effetto testo cromato imita il metallo lucido, che riflette ciò che lo circonda invece di avere un colore proprio.
- I gradienti cromati convincenti mostrano un cielo chiaro sopra una linea d’orizzonte netta e una terra scura sotto, con un riflesso più luminoso vicino al fondo.
- In CSS il testo cromato è un gradiente lineare ritagliato sulle lettere con background-clip: text e un riempimento del testo trasparente.
- Il cromo funziona meglio su caratteri display pesanti e larghi in grandi dimensioni, e male su testo sottile o piccolo.
- Colorare la parte di cielo del gradiente di blu, rosa o viola trasforma il cromo da industriale a retrò o Y2K.

Un **effetto testo cromato** funziona perché il metallo lucido ha quasi un colore proprio: rispecchia ciò che lo circonda. Su una lettera lucida vedi un cielo pallido nella metà alta, un orizzonte scuro e netto al centro e una terra che si illumina di nuovo verso il bordo inferiore. Metti queste fasce in un unico gradiente con un salto netto all’orizzonte, ritaglialo su un carattere pesante e hai il cromo. Una sfumatura grigia morbida, che è ciò che quasi tutti provano per prima, sembra solo grigia.

## Come il cromo riflette la luce

Immagina un paraurti cromato all’aperto. La curva superiore riflette il cielo, quindi è pallida e spesso leggermente azzurra. Dove la superficie si volge verso il terreno, il riflesso passa di colpo al paesaggio scuro: quella è la linea d’orizzonte, ed è il dettaglio più importante in assoluto. Sotto, il riflesso della terra si schiarisce mentre la curva risale, finendo in un riflesso luminoso sul bordo.

- **Fascia del cielo:** pallida, fredda, sempre più chiara verso l’alto.
- **Orizzonte:** un salto netto dal chiaro allo scuro appena sotto il centro. Nessuna sfumatura morbida.
- **Fascia della terra:** scura all’orizzonte, più calda o più chiara verso il basso.
- **Riflesso sul bordo:** una sottile linea luminosa vicino al bordo inferiore.
- **Contorno:** un bordo scuro attorno a ogni lettera separa il metallo dallo sfondo.

## Gradienti cromati da copiare

- Cromo classico: `linear-gradient(180deg, #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%, #2a2e36 49%, #4a4f59 62%, #b9bec6 86%, #f4f6f8 92%, #7d838d 100%)`
- Cromo cielo: `linear-gradient(180deg, #f2f8ff 0%, #b8d4f2 25%, #6d93c4 48%, #1d2533 50%, #3b3a45 64%, #c9b8a8 88%, #fff4e6 94%, #8a7f78 100%)`
- Cromo liquido Y2K: `linear-gradient(180deg, #fdf2ff 0%, #e4c6f5 22%, #9fb7f0 48%, #2b2142 49%, #4c3a6b 62%, #f0a8d0 86%, #fff0f8 92%, #8a6f9a 100%)`
- Cromo scuro: `linear-gradient(180deg, #9aa3ad 0%, #5d6670 49%, #0d0f12 50%, #1c2026 70%, #6e7782 92%, #2a2f36 100%)`
- Sfondo a disco cromato: `conic-gradient(from 20deg at 50% 50%, #e6e9ed, #6b7280, #f8fafc, #4b5563, #e5e7eb, #8b939e, #f1f3f5, #5b636e, #e6e9ed)`

Quattro gradienti per il testo e uno per lo sfondo. Nota il salto quasi netto in ogni gradiente per il testo intorno al 48 o 50%: è quell’orizzonte marcato che si legge come metallo.

Le versioni colorate sono dove il cromo si fa interessante. Un cielo blu dà il classico look da logo d’auto; rosa e viola lo spingono verso lo Y2K, che puntava molto sul cromo liquido. [L’estetica Y2K](https://gradiently.design/it/guide/y2k-aesthetic) racconta quell’epoca, e [il gradiente argento](https://gradiently.design/it/guide/silver-gradient) offre metalli più morbidi e satinati per quando il cromo a specchio è troppo.

## Testo cromato in CSS

La tecnica è il testo con gradiente: dipingi un gradiente come sfondo dell’elemento, ritaglialo sulle forme delle lettere e rendi trasparente il riempimento del testo. Un’ombra netta e spostata, applicata con `filter` invece di `text-shadow` così resta dietro al gradiente ritagliato, dà peso alle lettere. [Il testo con gradiente](https://gradiently.design/it/guide/css-gradient-text) spiega il metodo e il supporto dei browser più a fondo.

```css
.chrome {
  font-family: "Rubik Mono One", system-ui, sans-serif;
  font-size: clamp(3rem, 12vw, 9rem);
  line-height: 1;
  color: #a9b4c2; /* fallback where clipping is unsupported */
  background: linear-gradient(
    180deg,
    #ffffff 0%, #dfe6ee 22%, #a9b4c2 47%,
    #2a2e36 49%, #4a4f59 62%,
    #b9bec6 86%, #f4f6f8 92%, #7d838d 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #1b1e24;
  filter: drop-shadow(0 4px 0 #1b1e24);
}
```

Testo cromato classico. Il gradiente copre il riquadro della riga, quindi tieni `line-height` a 1 o l’orizzonte si sposta dal centro delle lettere.

## Testo cromato in un’app di design

1. **Scrivi prima la parola** Scrivi una parola breve in un carattere display pesante a grandi dimensioni. Convertila in contorni solo se la tua app non sa riempire con un gradiente il testo modificabile.
2. **Applica un riempimento a gradiente verticale** Usa i punti del Cromo classico qui sopra. Assicurati che il gradiente vada dalla cima delle lettere al fondo, non su tutta la tela.
3. **Rendi netto l’orizzonte** Trascina i punti chiaro e scuro al centro quasi uno sull’altro. Se ti sembra ancora morbido, avvicinali di più.
4. **Aggiungi bordo e peso** Un tratto scuro di uno o due pixel, poi un’ombra netta spostata dritta verso il basso. Niente ombre sfocate né aloni esterni.

## Font adatti al cromo

Il cromo ha bisogno di superficie. I tratti sottili non hanno spazio per cielo, orizzonte e terra, e l’effetto si riduce a una linea grigia. Scegli caratteri pesanti, larghi, meglio se arrotondati o adatti allo smusso, e usali in grande.

| Font | Carattere | Ideale per |
| --- | --- | --- |
| Rubik Mono One | Pesante, largo, angoli arrotondati | Loghi, singole parole |
| Bungee | Da insegna, squadrato, verticale | Poster, titoli di eventi |
| Michroma | Largo, tecnico, futurista | Tecnologia e motorsport |
| Monoton | Stile neon con filetto, retrò | Look anni Ottanta e disco |

Quattro font display gratuiti su Google Fonts che reggono bene un gradiente cromato. Sono tutti font display: non usarli mai per il testo corrente.

Per altre opzioni, [i font display](https://gradiently.design/it/guide/display-fonts) elenca i caratteri pesanti per mood, e [l’effetto testo retrò](https://gradiently.design/it/guide/retro-text-effect) abbina il cromo a contorni ed estrusione per un trattamento anni Ottanta completo.

## Come ottenere un cromo riuscito

### Sembra finto

- Una sfumatura morbida dal grigio chiaro al grigio scuro
- Orizzonte messo in cima o in fondo
- Cromo su testo sottile o piccolo
- Nessun contorno, così le lettere si fondono con lo sfondo
- Aloni luminosi morbidi attorno alle lettere

### Sembra metallo

- Un salto netto d’orizzonte appena sotto il centro
- Cielo chiaro sopra, terra scura sotto
- Caratteri display pesanti a dimensioni da titolo
- Un sottile contorno scuro e un’ombra netta spostata
- Uno sfondo scuro o a gradiente, senza fronzoli, con spazio intorno alla parola

Usa il cromo per una parola o un titolo breve, mai per un paragrafo. È un trattamento da titolo per copertine di album, poster di eventi, merchandising, canali di gaming e campagne nostalgiche. Su uno sfondo affollato scompare, quindi dagli una superficie calma e più scura.

Una copertina d’album quadrata con la sola parola TURBO in maiuscole pesanti su una superficie scura

Una parola pesante su una superficie scura: l’ambiente di cui il testo cromato ha bisogno per sembrare metallo.

Una storia verticale per una serata club intitolata Night Drive con una breve riga di dettaglio semplice sotto

Una storia verticale in cui un titolo breve porta la lucentezza e il dettaglio resta semplice e leggibile.

In Gradiently, i trattamenti per le scritte come Estrusione, Incisione e Contorno danno ai titoli profondità, una linea incisa o un contorno sopra un Mark vivo, e questo si sposa bene con i look metallici; il Mark tiene la sua zona più calma dietro le parole, così un titolo lucido non lotta mai con uno sfondo affollato. Per una lucentezza iridescente invece del metallo a specchio, vedi [il gradiente olografico](https://gradiently.design/it/guide/holographic-gradients).

## FAQ

### Come si crea un effetto testo cromato?

Usa un gradiente verticale con una fascia di cielo chiara, un orizzonte scuro netto appena sotto il centro e una fascia di terra più chiara, poi ritaglialo su un carattere pesante e aggiungi un sottile contorno scuro.

### Come si fa il testo cromato in CSS?

Imposta un gradiente lineare cromato come sfondo, poi usa `background-clip: text` con `-webkit-text-fill-color: transparent`. Aggiungi `filter: drop-shadow()` per un’ombra netta spostata.

### Quali colori compongono un gradiente cromato?

Quasi bianco, azzurro grigio pallido, un antracite molto scuro all’orizzonte, un grigio medio e un riflesso luminoso vicino al fondo. Tingi il cielo di blu, rosa o viola per le versioni retrò.

### Quali font funzionano meglio per il testo cromato?

Font display pesanti e larghi come Rubik Mono One, Bungee o Michroma, in grande. I font sottili non hanno spazio per mostrare il riflesso.

### Che differenza c’è tra cromo e argento?

Il cromo è uno specchio, con un riflesso d’orizzonte netto e forte contrasto. L’argento nel design è di solito più morbido e satinato, con transizioni più dolci.