In questo articolo
Cosa fa CSS Text Shadow
La proprietà CSS text-shadow aggiunge effetti ombra ai caratteri del testo. Ogni ombra è definita da offset orizzontale, offset verticale, raggio di sfocatura e colore. A differenza di box-shadow, text-shadow segue la forma esatta di ogni glifo del carattere, creando effetti che avvolgono le forme delle lettere.
Puoi impilare più ombre su un singolo elemento separandole con virgole. Questo abilita effetti complessi come bagliori al neon, lettere in rilievo, estrusioni 3D e testo di fuoco — tutto con CSS puro, senza immagini o canvas necessari.
Usare il generatore di ombra del testo
Il generatore fornisce controlli intuitivi per creare ombre di testo senza memorizzare la sintassi CSS. Puoi regolare ogni parametro in tempo reale e vedere il risultato istantaneamente.
- Controlli di offset — trascina i cursori o inserisci valori esatti in pixel per l'offset orizzontale (X) e verticale (Y) per posizionare l'ombra rispetto al testo
- Raggio di sfocatura — aumenta la sfocatura per effetti morbidi e luminosi o mantienilo a zero per ombre nitide che sembrano duplicati solidi
- Livelli multipli — aggiungi più livelli di ombra e riordinali per creare effetti compositi complessi come contorni, bagliori e profondità
Prova gratuitamente — nessuna registrazione richiesta
Genera CSS Text Shadow →Effetti di testo creativi con text shadow
Le ombre di testo non servono solo per effetti di profondità sottili. Combinando più livelli di ombra con diversi offset, valori di sfocatura e colori, puoi creare effetti visivi sorprendenti interamente in CSS.
- Bagliore al neon — usa offset zero con grande raggio di sfocatura e un colore brillante (ciano, magenta, lime) ripetuto in più livelli con sfocatura crescente per simulare un bagliore al neon
- Rilievo e letterpress — combina un'ombra chiara leggermente spostata in basso a destra con un'ombra scura leggermente spostata in alto a sinistra su sfondo grigio medio per un effetto premuto nel metallo
- Estrusione 3D — impila molte ombre con offset incrementali (1px 1px, 2px 2px, 3px 3px...) in colori gradualmente più scuri per un effetto di testo tridimensionale solido
Domande frequenti
Text-shadow influisce sulle prestazioni?
Le ombre singole hanno un impatto trascurabile sulle prestazioni. Tuttavia, impilare molte ombre con grandi raggi di sfocatura può causare rallentamenti di rendering, soprattutto sui dispositivi mobili. Testa gli effetti complessi sui dispositivi target.
Quali browser supportano text-shadow?
Text-shadow ha un eccellente supporto in tutti i browser moderni, inclusi Chrome, Firefox, Safari, Edge e browser mobili. È supportato da IE10 e può essere usato senza fallback in produzione.
Si può animare text-shadow con transizioni CSS?
Sì. Text-shadow è completamente animabile con transizioni CSS e animazioni keyframe. Puoi fare transizioni fluide tra diversi stati di ombra per effetti hover e animazioni.