Generatore Ombra Testo CSS
Crea effetti ombra testo multi-strato visivamente con anteprima live.
① Regola offset e blur per ogni layer ② Aggiungi più layer ombra ③ Copia il CSS
Preset:
Ombra 1
2px
2px
4px
30%
Codice CSS
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
Cos'è CSS text-shadow?
La proprietà CSS text-shadow aggiunge una o più ombre al testo. Ogni ombra è definita da offset X, offset Y, raggio blur e colore — es. text-shadow: 2px 2px 4px rgba(0,0,0,0.5). Più layer si separano con virgola per creare effetti complessi come glow, estrusione 3D e rilievo. Blur elevato con rgba() e offset zero produce un effetto neon.
Domande Frequenti
CSS text-shadow aggiunge effetti ombra al testo. Ogni ombra richiede offset X, offset Y, raggio blur e colore. Più ombre separate da virgola creano effetti a strati complessi.
Sì. CSS text-shadow accetta un elenco separato da virgole di definizioni di ombre. Ogni ombra viene applicata in ordine, con la prima elencata in cima.
Il raggio blur controlla quanto è diffusa l'ombra. Un valore 0 dà un'ombra nitida. Valori più grandi creano ombre più morbide. Valori molto grandi creano effetti glow.
Usa quattro ombre con blur 0, ciascuna offset in una direzione: text-shadow: 1px 0 black, -1px 0 black, 0 1px black, 0 -1px black.
Sovrapponi più ombre con offset X e Y crescenti dello stesso colore: text-shadow: 1px 1px #aaa, 2px 2px #aaa, 3px 3px #aaa. Questo crea un effetto di estrusione 3D a strati.
Text-shadow è accelerato GPU nei browser moderni e ha un impatto minimo sulle performance per usi tipici. Grandi raggi blur su testi molto lunghi possono influire su dispositivi low-end.
CSS text-shadow è supportato da tutti i browser moderni dal 2010. Non sono necessari prefissi vendor.