Generatore Text Shadow CSS Gratis: Ombra Testo Visuale Online
103 utilizzi2px
2px
4px
50%
Hello World
Consigli Text Shadow
Ombra visuale
X/Y offset, blur e colore. Anteprima in tempo reale.
CSS pronto
text-shadow generato automaticamente.
Colore e diffusione
Qualsiasi colore con opacità. Più blur = più morbida.
Domande Frequenti
Come funziona?
text-shadow: X Y blur colore.
Ombre multiple?
Sì in CSS, separate da virgola.
A cosa serve?
Titoli, testo su immagini, effetti neon.
Questo strumento creerà ombre che sembreranno pixelate o sfocate su diverse risoluzioni dello schermo?
No, non lo farà. Il generatore crea proprietà CSS `text-shadow` standard. Queste sono basate su vettori e scalano con il tuo testo. Otterrai ombre nitide sui display ad alta risoluzione e ombre standard altrove. Assicurati solo che la dimensione del tuo carattere base sia impostata in modo appropriato.
L'ordine dei valori dell'ombra è importante?
Sì, assolutamente. Il CSS legge i valori di text-shadow in una sequenza precisa: offset X, offset Y, raggio di sfocatura e poi colore. Se li mischi, l'ombra si rompe o si comporta in modo imprevisto. Ad esempio, '2px 2px 4px #000' funziona correttamente, ma '2px 4px #000 2px' non verrà renderizzato come previsto. Il generatore impone automaticamente quest'ordine, così puoi copiare il codice senza pensarci due volte.
Usare troppe ombre sul testo ha un costo sulle prestazioni?
Sì, accumulare 5 o più ombre su un singolo elemento rallenta il rendering, specie su mobile. Ogni ombra aggiunge un calcolo extra per il browser. Una singola ombra con 3px di sfocatura è leggera. Per testi decorativi, limitati a 2 o 3 ombre al massimo. Se noti rallentamenti, riduci il raggio di sfocatura o elimina un livello. L'anteprima dello strumento te lo mostra in tempo reale.
Modificare il raggio di sfocatura cambia il colore dell'ombra?
No, non direttamente. Il raggio di sfocatura controlla solo quanto diventano morbidi i bordi dell'ombra. Uno sfocatura di 0px dà un bordo netto come un timbro. A 10px, il colore si diffonde e sembra più chiaro, ma il valore hex o rgba rimane identico. Per un'ombra più profonda, aumenta l'opacità del colore invece di ridurre la sfocatura. Prova un raggio di 5px con nero al 50%: ottieni un buon equilibrio.
Posso applicare un'ombra al testo solo su un lato, come una sottolineatura?
Non direttamente con una singola proprietà text-shadow. Le ombre CSS avvolgono l'intera forma del testo. Ma puoi simulare l'effetto: imposta l'offset Y a 3–4px, la sfocatura a 1px, e usa un colore scuro al 70% di opacità. Questo crea un'ombra netta che cade dritta verso il basso, imitando una sottolineatura. Per una vera sottolineatura unilaterale, è meglio usare border-bottom o un pseudo-elemento.
Come Usare
- Scrivi testo anteprima
- Regola X, Y, blur
- Scegli colore
- Anteprima in tempo reale
- Copia CSS