CSS Text Shadow: Effetti, Neon e Trucchi Tipografici
Padroneggia la sintassi text-shadow, l'effetto neon, gli effetti in rilievo e il testo leggibile sulle immagini.
CSS text-shadow aggiunge profondita, bagliore e dimensione alla tipografia. A differenza di box-shadow, text-shadow segue la forma dei singoli caratteri.
Gli effetti text-shadow piu impressionanti usano ombre multiple sovrapposte. Un bagliore neon richiede 3-4 ombre con diversi raggi di sfocatura.
Sintassi text-shadow
La sintassi text-shadow e: text-shadow: offset-x offset-y blur-radius color. A differenza di box-shadow, non c'e spread-radius e nessuna parola chiave inset. Piu ombre sono separate da virgole.
Tool gratuito Generatore Text Shadow Crea effetti neon, rilievo e ombre di testo creativiOmbre di testo multiple
Piu valori text-shadow creano ricchi effetti tipografici. La prima ombra e posizionata in cima. Tecnica per la profondita: usa tre ombre con lo stesso colore ma diversi valori di sfocatura.
Effetto bagliore neon
Il testo neon usa ombre sovrapposte con sfocatura crescente. Ricetta tipica: prima ombra 0 0 7px con il colore del bagliore, seconda 0 0 10px, terza 0 0 21px, quarta 0 0 42px con una versione piu luminosa.
Tool gratuito Generatore Sfumatura Testo Crea effetti di testo sfumato colorato con CSSEffetti emboss e deboss
Effetto emboss (testo in rilievo): due ombre — ombra scura sotto e a destra, ombra chiara sopra e a sinistra. Deboss (testo incassato): inverti le posizioni delle ombre.
Testo leggibile sulle immagini
text-shadow con alta sfocatura e colore scuro crea un alone morbido che rende il testo leggibile su qualsiasi immagine: text-shadow: 0 0 20px rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.6).
Esempi tipografici creativi
Testo 3D: sovrapponi 10-20 ombre identiche sfalsate di 1px nella stessa direzione. Effetto retro print: usa un'ombra dura sfalsata di 1-2px in un colore contrastante.
Tool gratuito Generatore di Scala Tipografica Genera una scala tipografica armoniosa per il tuo design system