Generatore di sfumature di testo CSS

Come usare

1. Scegli i tuoi colori: seleziona due o più colori per il gradiente tramite i selettori.
2. Regola l'angolo e lo stile: scegli gradiente lineare o radiale, regola l'angolo, e aggiungi eventualmente una posizione di punto colore.
3. Copia il CSS: il codice CSS generato usa background-clip: text e -webkit-background-clip: text per l'effetto di testo a gradiente, copialo direttamente nel tuo foglio di stile.

Perché usare il generatore di testo a gradiente?

Il testo a gradiente è uno degli effetti CSS moderni più popolari per titoli, loghi e testi di call-to-action. Ottenerlo richiede una combinazione specifica di proprietà CSS (background, background-clip, -webkit-text-fill-color) facile da sbagliare. Questo generatore gestisce automaticamente la sintassi cross-browser e offre un'anteprima dal vivo per perfezionare il tuo gradiente prima di scrivere una sola riga di codice.

Funzionalità

• Punti colore multipli: aggiungi tutti i punti colore necessari per effetti di gradiente complessi.
• Lineare e radiale: scegli tra gradienti lineari direzionali e gradienti radiali centrati.
• Controllo dell'angolo: regola l'angolo del gradiente da 0° a 360° con un quadrante visivo.
• Anteprima dal vivo: vedi il tuo testo a gradiente aggiornarsi in tempo reale con il tuo esempio.
• CSS cross-browser: l'output include i prefissi -webkit e fallback per la massima compatibilità.

Domande frequenti

Come funziona il testo a gradiente CSS?

Il testo a gradiente CSS funziona applicando un gradiente di sfondo all'elemento, poi ritagliando questo sfondo secondo la forma del testo con background-clip: text, e rendendo trasparente il colore del testo con -webkit-text-fill-color: transparent (o color: transparent). Solo il ritaglio a forma di testo del gradiente è visibile.

Il testo a gradiente funziona in tutti i browser?

Il testo a gradiente CSS funziona in tutti i browser moderni, Chrome, Firefox, Safari ed Edge. La proprietà -webkit-background-clip: text è ben supportata. Prevedi sempre un fallback in colore solido per i browser molto vecchi tramite la proprietà color.

Posso usarlo a qualsiasi dimensione di carattere?

Sì. Il testo a gradiente si adatta perfettamente alla dimensione del carattere, è puro CSS, non un'immagine, quindi resta nitido a qualsiasi risoluzione, inclusi gli schermi ad alta densità.

Una breve storia del testo con gradiente sul web

Il testo con gradiente è diventato visivamente possibile sul web con la proprietà -webkit-background-clip: text di WebKit, un'estensione sperimentale Safari/Chromium proposta dal team WebKit nel 2008 come modo per riempire le forme dei glifi del testo con uno sfondo arbitrario (gradiente, immagine, qualsiasi cosa). La tecnica è rimasta non ufficiale per anni: Firefox ha rilasciato background-clip: text senza prefisso solo nella versione 49 (settembre 2016), e il CSS Backgrounds Module Level 4 l'ha formalizzata come bozza di lavoro W3C a partire da circa 2018. La sintassi del gradiente sottostante è maturata separatamente. Il CSS Images Module Level 3 (Raccomandazione W3C 2017) ha standardizzato linear-gradient() e radial-gradient() come valori di immagine di prima classe; conic-gradient() è seguito nel Module Level 4 (Chrome 69 settembre 2018, Safari 12.1 marzo 2019, Firefox 83 novembre 2020). La combinazione di queste due specifiche è ciò che rende possibile oggi un titolo con gradiente su una sola riga. L'adozione è esplosa nella comunità degli sviluppatori quando Tailwind CSS ha rilasciato le sue classi di utilità bg-clip-text nella v1.4 (2020), rendendo i titoli con gradiente una primitiva pronta all'uso. L'identità di marca moderna ora si affida al testo con gradiente come firma visiva: la serie «Bridges» di Stripe, il logotipo con gradiente di Linear, la pagina di destinazione di Vercel, il marketing WWDC di Apple e il negozio di template di Notion utilizzano tutti questa tecnica. Il pattern combinato background-clip: text + gradiente ha effettivamente sostituito il «PNG di un titolo stilizzato» che dominava il design web 2005-2015, rimuovendo una categoria di problemi di accessibilità e prestazioni in un colpo solo.

L'anatomia del testo con gradiente CSS

• Il gradiente stesso. background-image: linear-gradient(90deg, #f00, #00f) imposta lo sfondo dell'elemento su un gradiente a 90 gradi che va dal rosso al blu. Il gradiente può essere lineare (direzionale), radiale (centrato), conico (spazzata rotazionale) o qualsiasi delle varianti ripetenti. I gradienti CSS sono valori di immagine, non valori di colore, il che è ciò che li rende ritagliabili in una forma di testo.
• background-clip: text. Dice al browser di renderizzare lo sfondo solo all'interno della geometria dei glifi renderizzati. Senza questa singola proprietà, il gradiente riempie l'intera scatola dell'elemento; con essa, il gradiente è limitato al contorno del testo. Originariamente un'estensione WebKit con prefisso come -webkit-background-clip: text, ora anche senza prefisso in Firefox 49+ (2016) e nei browser basati su Chromium.
• color: transparent o -webkit-text-fill-color: transparent. Una volta che lo sfondo è ritagliato sul testo, il risultato visibile dipende ancora da quale colore il testo stesso dipinge sopra lo sfondo. Impostare color: transparent (o il -webkit-text-fill-color: transparent con prefisso) consente al gradiente di trasparire. Senza questo, il colore solido del testo dipingerebbe semplicemente sopra il gradiente ritagliato.
• La catena di prefissi -webkit-. Safari, la piattaforma con la più accumulata storia di prefissi, analizza ancora le proprietà senza prefisso ma le versioni con prefisso rimangono nel codice di produzione per motivi ereditati. L'output di questo generatore include sia background-clip: text sia -webkit-background-clip: text in modo che la tecnica funzioni fino a Safari 14 e qualsiasi browser legacy basato su WebKit.
• Tipi di gradiente e stop. linear-gradient(angle, color1, color2, ...) va in una direzione; radial-gradient(shape at position, ...) emana da un punto; conic-gradient(from angle at position, ...) spazza attorno come la lancetta di un orologio. Ciascuno accetta arbitrariamente molti stop di colore, con posizioni esplicite (red 0%, blue 50%, green 100%) per un controllo fine su dove ogni colore inizia e finisce.

Schemi di utilizzo reale del testo con gradiente

• Titoli di identità di marca. La serie «Bridges» di Stripe, l'hero di prodotto di Linear, il banner «Develop. Preview. Ship.» di Vercel utilizzano tutti il testo con gradiente come firma di marca. I wordmark a colore singolo sembrano datati per SaaS in fase iniziale, mentre i titoli con gradiente portano il segnale visivo «costruito nel 2024».
• Titoli di sezione hero. L'H1 in una landing page è spesso l'unico elemento di testo con il più alto budget di design. Il testo con gradiente gli dà peso visivo senza ricorrere a un file di font personalizzato, un SVG o un'immagine hero, che aggiungono tutti peso alla pagina e preoccupazioni di accessibilità.
• Pagine con grandi numeri di metriche. Pagine di prezzo («$0 per iniziare»), callout statistici («10× più veloce») e riepiloghi di dashboard utilizzano il testo con gradiente per attirare l'occhio sul numero stesso. Il gradiente sostituisce efficacemente il pattern «cerchio colorato dietro il numero» dei design più vecchi.
• Pulsanti di call-to-action. Un sottile gradiente sul testo CTA (piuttosto che sullo sfondo del pulsante) sembra più raffinato di un colore solido e si abbina bene a una superficie di pulsante glassmorphic o neumorphic. La tecnica è comune nei marchi fintech e di strumenti di design.
• Evidenziazioni di navigazione. Uno stato attivo o di hover su un link di navigazione può utilizzare il testo con gradiente per fornire feedback visivo senza aggiungere sottolineatura o cambio di colore di sfondo. Questo pattern è molto utilizzato nei siti di documentazione (Stripe Docs, Tailwind Docs).
• Modalità scura e design brand-bridge. Il testo con gradiente funziona particolarmente bene su sfondi scuri perché i colori saturi spiccano senza competere contro una superficie chiara affollata. Molti prodotti mantengono titoli a colore solido in modalità chiara e passano al gradiente in modalità scura (utilizzando uno scambio di variabili CSS).
• Callout di prodotti e-commerce. I badge «Saldo», «Nuovo», «Edizione Limitata» e i sottotitoli di prodotto utilizzano il testo con gradiente per differenziarsi dal corpo del testo senza richiedere risorse di icone. L'editor di vetrina di Shopify presenta il testo con gradiente come opzione integrata nel 2024.

Considerazioni di accessibilità

• WCAG 2.1 SC 1.4.3 Contrasto (Minimo). Il criterio di successo richiede almeno 4,5:1 di contrasto tra testo e sfondo per testo normale (3:1 per testo grande, definito come 18pt+ o 14pt grassetto). Il testo con gradiente è più difficile da valutare perché il rapporto di contrasto varia attraverso il gradiente. L'approccio sicuro: assicurarsi che il colore più chiaro del vostro gradiente soddisfi ancora il rapporto rispetto allo sfondo. Strumenti come WebAIM Contrast Checker e Stark in Figma possono aiutare.
• Scegliete prima il colore più scuro del gradiente. Quando si abbina un gradiente con uno sfondo chiaro, scegliere il colore più chiaro del gradiente per superare il rapporto 4,5:1 garantisce che anche il resto del gradiente sia accessibile. Lo stesso si applica al contrario su sfondi scuri. WCAG 2.2 (raccomandazione ottobre 2023) ha rafforzato le linee guida sulla presentazione visiva, incluso il caso in cui il contrasto del testo varia lungo il percorso.
• Gli screen reader vedono il testo invariato. Poiché il gradiente è puramente uno stile visivo (background-clip, color), la tecnologia assistiva legge il contenuto del testo renderizzato indipendentemente da come è colorato. Non c'è preoccupazione di «testo alternativo» con il testo con gradiente, a differenza del testo immagine rasterizzato o del SVG-testo-senza-elemento-testo.
• prefers-reduced-motion. I gradienti animati (transizioni background-position, animazioni di ciclo di colore) dovrebbero essere avvolti in @media (prefers-reduced-motion: no-preference) in modo che gli utenti con disturbi vestibolari o sensibilità al movimento vedano un gradiente statico. Il CSS Working Group ha aggiunto la media query nel 2017; il supporto del browser è universale dal 2020.
• Zoom del browser e ridimensionamento del testo. WCAG 2.1 SC 1.4.4 richiede che il testo sia ridimensionabile fino al 200% senza perdita di contenuto. Il testo con gradiente scala perfettamente perché è puramente renderizzato in CSS (senza rasterizzazione). Gli utenti con ipovisione che usano lo zoom Ctrl+/Cmd+ vedranno il gradiente rimanere nitido a qualsiasi livello di zoom.
• Fogli di stile di stampa. La maggior parte dei browser elimina i colori ritagliati sullo sfondo durante la stampa perché la pagina stampata si aspetta inchiostro su carta, e gli sfondi gradiente scompaiono. Fornire sempre una sovrascrittura @media print che imposti un color solido sul testo con gradiente in modo che le copie stampate rimangano leggibili. Molti designer dimenticano questo; stampare un titolo con gradiente produce spesso testo invisibile.
• Catena di colore di fallback. Impostare sempre prima una proprietà color solida, poi aggiungere color: transparent (o -webkit-text-fill-color: transparent) in modo che i browser senza supporto per background-clip: text (IE legacy, browser Android molto vecchi) vedano ancora testo di colore solido piuttosto che testo invisibile. L'output del generatore include questo fallback per impostazione predefinita.

Altre domande frequenti

Perché il testo con gradiente è considerato una firma di marca moderna?

Due ragioni. Primo, la ragione tecnica: il testo con gradiente è diventato completamente cross-browser solo intorno al 2017-2020, quindi i design che lo usano portano visibilmente il segnale «costruito di recente», allo stesso modo in cui il flat design diceva «2013» o lo scheumorfismo diceva «2010». Secondo, la ragione culturale: Stripe, Linear, Vercel e Apple WWDC hanno popolarizzato il testo con gradiente come elemento di identità di marca nell'ondata 2020-2024 del marketing fintech e di strumenti per sviluppatori. Adottare lo stesso linguaggio visivo segnala l'appartenenza a quella linea di design.

Come animo un effetto di testo con gradiente?

La tecnica più comune anima background-position su un gradiente sovradimensionato. Impostare background-size: 200% 200% e animare background-position da 0% 0% a 100% 100% su un loop di 3-5 secondi. Avvolgere sempre i keyframe in @media (prefers-reduced-motion: no-preference) in modo che gli utenti con sensibilità al movimento vedano la versione statica. Evitare di animare direttamente i singoli stop di colore: CSS attualmente non interpola tra i valori di gradiente in modo fluido tra i browser, sebbene CSS @property (Raccomandazione candidata W3C 2022) stia iniziando ad abilitare questo.

I motori di ricerca e gli screen reader possono vedere il testo con gradiente?

Sì. Il testo con gradiente è puro testo HTML stilizzato con CSS; il DOM contiene ancora i caratteri reali. Google, Bing, gli screen reader (NVDA, JAWS, VoiceOver) e qualsiasi strumento di estrazione del testo leggono il contenuto esattamente come se fosse testo normale a colore solido. Questa è una delle principali ragioni per cui il testo CSS con gradiente ha sostituito il vecchio pattern «PNG di un titolo stilizzato»: quelle immagini erano invisibili alla ricerca e agli screen reader senza testo alternativo manuale.

Il testo con gradiente funziona nelle email HTML?

Per lo più no. Outlook desktop (motore di rendering Word) rimuove background-clip; il client web di Gmail lo supporta in modo incoerente; Apple Mail e i client Gmail mobili moderni di solito lo renderizzano correttamente. Per le campagne email, l'approccio più sicuro è inviare un titolo a colore solido di fallback e trattare il testo con gradiente come «miglioramento progressivo» per i client che lo supportano. Alcuni team pre-compongono il titolo come PNG/SVG con testo alternativo e accettano il compromesso di accessibilità.

Quali colori funzionano meglio insieme in un gradiente di testo?

Tre pattern dominano. Analoghi (colori uno accanto all'altro sulla ruota, es. blu → viola → rosa) dà risultati morbidi, brand-friendly, ed è il default per la maggior parte dei sistemi di design moderni. Complementari (opposti sulla ruota, es. blu → arancione) crea un forte contrasto ma può sembrare appariscente in testo lungo. Tonalità di marca (il vostro colore primario di marca con sottile variazione di luminosità/saturazione) produce un effetto sofisticato che sembra integrato piuttosto che decorativo. Evitate di mescolare più di tre colori in un singolo titolo; gradienti complessi sono meglio riservati per icone ed elementi grafici.