Generatore di text shadow CSS: neon, 3D, long shadow + Tailwind | We.Inc
Crea text shadow CSS a più livelli con un'anteprima dal vivo. Parti dai preset neon, 3D, long shadow, letterpress o contorno, poi copia il CSS o una classe Tailwind.
Generatore di text shadow CSS
La proprietà CSS text-shadow accetta un offset x, un offset y, un raggio di sfocatura facoltativo e un colore, per esempio text-shadow: 0 2px 6px rgb(0 0 0 / 0.25). Separa più ombre con delle virgole per sovrapporle: è così che si creano i bagliori neon e le scritte in 3D. Creane una qui sotto e copia il CSS o la classe Tailwind.
I quattro valori di un'ombra
Valore
Esempio
Effetto
offset x
Sposta l'ombra a destra (negativo: a sinistra)
offset y
Sposta l'ombra in basso (negativo: in alto)
raggio di sfocatura
Ammorbidisce il bordo; 0 dà una copia netta
rgb(0 0 0 / 0.25)
Qualsiasi colore CSS; di default è il colore del testo
Sovrapponi tutti i livelli che vuoi, cambia testo, dimensione del font e colori, e guarda l'anteprima aggiornarsi. L'output è CSS semplice che funziona in tutti i browser attuali, più una classe Tailwind per i progetti che lo usano.
Scegli un preset o parti da una singola ombra morbida.
Modifica offset, sfocatura, colore e opacità di ogni livello, oppure aggiungi e rimuovi livelli. I livelli elencati per primi vengono disegnati sopra.
Cambia testo, dimensione, peso e colori dell'anteprima per adattarli al tuo design.
Copia la dichiarazione CSS o la classe Tailwind con proprietà arbitraria.
Le ombre non contano nei controlli del contrasto. Assicurati che il testo superi il controllo rispetto allo sfondo senza ombra, poi aggiungi l'ombra come tocco finale.
Per un testo bianco su una foto piena di dettagli, un'ombra scura e morbida aiuta la leggibilità più di una netta. Abbinala a una sovrapposizione scura sull'immagine per una leggibilità vera.
Raggi di sfocatura grandi su molti livelli costano tempo di disegno, e animarli costa ancora di più. Riserva i bagliori pesanti ai titoli, non al testo normale.
Un'ombra chiara di 1px sotto un testo grigio su sfondo grigio dà l'effetto letterpress impresso; inverti l'offset per un testo in rilievo.
Domande frequenti
Come creo un testo neon in CSS?
Usa un testo chiaro con più ombre dello stesso colore brillante a offset zero e sfocatura crescente: un bagliore bianco stretto, poi bagliori da 12px, 24px e 48px nel colore d'accento. Mettilo su uno sfondo scuro. Il preset Neon è un punto di partenza.
text-shadow supporta lo spread come box-shadow?
No. text-shadow non ha un valore di spread né la parola chiave inset. Per simulare un contorno più spesso, sovrapponi più ombre nette spostate di un pixel in ogni direzione, come fa il preset Contorno, oppure usa -webkit-text-stroke.
Come aggiungo un text shadow in Tailwind?
Tailwind 4.1 e versioni successive includono utility text-shadow come text-shadow-sm e text-shadow-lg. Per un'ombra personalizzata in qualsiasi versione, usa una proprietà arbitraria come [text-shadow:0_2px_6px_rgb(0_0_0/0.25)], dove i trattini bassi stanno per gli spazi. Il generatore scrive quella classe per te.
Perché la mia ombra appare diversa in Safari?
I browser rasterizzano la sfocatura in modo leggermente diverso, quindi le sfocature grandi possono apparire più morbide o più forti da un motore all'altro. Le ombre nette con sfocatura zero appaiono uguali ovunque.
Come funziona la sovrapposizione
Ogni ombra separata da virgola viene disegnata dietro il testo, e la prima dell'elenco finisce sopra le altre. Quell'ordine conta per gli effetti 3D: elenca per primo il livello più vicino e chiaro, e per ultimo quello più lontano e scuro.
Le long shadow sono semplicemente tanti livelli identici spostati di un pixel alla volta. Fanno colpo in un titolo grande, ma ogni livello è un'altra operazione di disegno, quindi tieni contenuto il numero di passi.
Accessibilità e movimento
Le ombre possono sfocare il testo piccolo e renderlo più difficile da leggere per chi ha una vista ridotta. Riserva gli effetti decorativi ai titoli grandi e mantieni nitido il testo normale.
Se animi un bagliore, racchiudi l'animazione in un controllo prefers-reduced-motion così chi ha chiesto meno movimento riceve una versione statica.