In breve
- 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.
In questa pagina
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
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 racconta quell’epoca, e il gradiente argento 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 spiega il metodo e il supporto dei browser più a fondo.
.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);
}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.
Carattere
Ideale per
Ideale per
Ideale per
Ideale per
Per altre opzioni, i font display elenca i caratteri pesanti per mood, e l’effetto testo retrò 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 parola pesante su una superficie scura: l’ambiente di cui il testo cromato ha bisogno per sembrare metallo.
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.
Le domande più frequenti
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.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo