Generatore ombra testo CSS

Crea text-shadow CSS con cursori e anteprima del testo live

Che cos'è e come funziona?

CSS text-shadow aggiunge una o più ombre proiettate al testo, definite da offset orizzontale, verticale, raggio di sfocatura e colore. Una singola ombra ben regolata fa risaltare i titoli su un'immagine di sfondo; sovrapporre più ombre crea effetti di bagliore neon, letterpress, lunga ombra o estrusione 3D — puramente in CSS.

Questo generatore offre un'anteprima dal vivo con controlli per ogni livello di ombra. L'output è una dichiarazione CSS text-shadow pronta da incollare.

Casi d'uso

• Leggibilità sulle immagini: aggiungi un'ombra scura morbida (0px 1px 3px rgba(0,0,0,0.6)) al testo bianco di un hero su uno sfondo foto variabile.
• Bagliore neon: sovrapponi tre ombre dello stesso tono con raggi di sfocatura crescenti (0 0 5px, 0 0 15px, 0 0 30px).
• Letterpress/goffrato: combina un'ombra chiara in basso-destra e una scura in alto-sinistra per far sembrare il testo inciso nella superficie.

Domande frequenti

Qual è l'ordine dei valori in text-shadow?

text-shadow: offset-x offset-y blur-radius color. Il blur-radius è opzionale (0 per default = bordo netto).

Posso usare text-shadow senza sfocatura per ombre nette?

Sì. Impostare blur-radius a 0 dà un'ombra con bordo netto — base degli effetti lunga ombra e retrò 8-bit.

text-shadow funziona sui pseudo-elementi ::before e ::after?

Sì — text-shadow si applica al contenuto testuale dei pseudo-elementi proprio come al testo reale.

text-shadow è uguale a box-shadow?

No. text-shadow si applica solo ai glifi del testo; box-shadow all'intera casella dell'elemento. text-shadow non supporta la parola chiave inset.

CSS

Generatore ombra box CSS · Generatore raggio bordo CSS · Generatore Flexbox · Generatore CSS Grid · Generatore animazioni CSS · Generatore filtri CSS