Generatore di text-shadow CSS
NovitàRegola un’ombra del testo CSS con anteprima in tempo reale e copia il codice.
Select a layer above to edit it.
Runs entirely in your browser. Nothing is uploaded.
Progetta ombre per testo CSS con anteprima in tempo reale
Questo generatore di ombra testo CSS ti permette di progettare visivamente effetti di profondità, luminosità e contorno e di copiare CSS pulito e pronto per la produzione. Clicca direttamente nell'area di anteprima grande per scrivere il tuo testo, trascina i cursori di scostamento, sfocatura e opacità, scegli un colore e guarda come il text-shadow si aggiorna in tempo reale sul tuo testo.
Modifica la famiglia di caratteri, la dimensione e il peso, imposta il colore del testo e alterna lo sfondo tra chiaro, grigio, scuro e a scacchiera per vedere esattamente come si legge la tua ombra su diverse superfici — essenziale per gli effetti testo neon e testo luminoso, che appaiono correttamente solo su sfondo scuro.
La sintassi di text-shadow, spiegata
Una singola ombra CSS si scrive come text-shadow: offset-x offset-y blur-radius color. I valori offset-x e offset-y spostano l'ombra orizzontalmente e verticalmente (i valori negativi la proiettano verso l'alto o a sinistra), il blur-radius ammorbidisce il bordo (0 lo mantiene nitido) e il colore definisce la tonalità — di solito un nero semitrasparente per una profondità sottile o una tinta vivace per un bagliore.
Un'ombra classica e leggibile è text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4). Imposta entrambi gli scostamenti su 0 e aumenta la sfocatura per un alone morbido intorno al testo. Con un colore vivace (es. #00eaff) e più valori di sfocatura crescenti, ottieni un bagliore neon.
Sovrapponi più ombre: neon, 3D, contorno e ombra lunga
Il vero potere di text-shadow è la sovrapposizione. Puoi elencare più ombre di testo in una singola dichiarazione separandole con virgole, e il browser le dipinge una alla volta. Sovrapporre più ombre dello stesso colore vivace con sfocatura crescente crea un effetto testo neon / luminoso; scalare gli scostamenti verso il basso e a destra in toni sempre più scuri costruisce un testo 3D estruso; ripetere uno scostamento piatto per dieci o più livelli crea un'ombra lunga; e da quattro a otto scostamenti duri intorno ai glifi producono un testo con contorno.
Usa la galleria di preset — Morbido, Neon, Bagliore, 3D, Ombra lunga, Contorno, Retrò, Fuoco e Letterpress — come punto di partenza.
Copia CSS, Tailwind o React Native
Esporta il risultato nel formato di cui ha bisogno il tuo progetto. Copia CSS ti dà una dichiarazione standard di text-shadow; Copia Tailwind genera una classe di proprietà arbitraria come [text-shadow:2px_2px_4px_#00000066] che funziona con le utility native text-shadow-* di Tailwind v4; e Copia React Native converte il primo livello in textShadowColor, textShadowOffset e textShadowRadius.
Buone notizie sulla compatibilità con i browser: text-shadow è completamente standardizzato e non richiede prefissi -webkit- o -moz- in nessun browser moderno.
Confronto con CSSmatic, css.generator.cool e altri strumenti
La maggior parte degli strumenti online per l'ombra del testo CSS gestisce un singolo livello di ombra. La sezione di ombra testo di CSSmatic offre un insieme di cursori — utile per un'ombra base, ma non puoi sovrapporre livelli per effetti neon o 3D senza scrivere manualmente le dichiarazioni aggiuntive.
UtiloKit combina sovrapposizione multistrato, nove preset che caricano uno stack completo di ombre con un solo clic, anteprima live modificabile, copia con un clic in tre formati (CSS, Tailwind, React Native) e un URL condivisibile — senza registrazione e senza file caricati.
text-shadow vs box-shadow
È un punto di confusione comune: text-shadow segue il profilo delle lettere, mentre box-shadow segue la scatola rettangolare di un elemento. text-shadow non ha né raggio di diffusione né parola chiave inset — quindi, a differenza di box-shadow, un'ombra di testo non può essere interna. Usa text-shadow per intestazioni, loghi ed etichette, e box-shadow per schede e pulsanti.
Se stai cercando di creare un aspetto inciso o stampato sul testo, il trucco è un'ombra chiara posizionata appena sotto il testo scuro (vedi il preset Letterpress). Per contorni di testo spessi, la proprietà -webkit-text-stroke è più pulita che sovrapporre otto ombre direzionali.
Consigli per ombre leggibili — e privacy
Le ombre sono un tocco estetico, non un sostituto del contrasto. Per il testo su foto, una singola ombra a bassa opacità come 0 1px 3px rgba(0, 0, 0, 0.5) migliora la leggibilità senza distrarre. Riserva gli effetti neon e 3D pesanti ai grandi titoli di visualizzazione e verifica sempre che il contrasto del testo soddisfi ancora il WCAG.
Non c'è nulla da installare né un account da creare. Ogni anteprima e ogni riga di CSS generato viene prodotta localmente nel tuo browser, quindi il testo che digiti non lascia mai il tuo dispositivo.
Frequently asked questions
Come applico un'ombra al testo?
Aggiungi la proprietà CSS text-shadow a qualsiasi elemento di testo. La forma abbreviata è text-shadow: offset-x offset-y blur-radius color — ad esempio text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4) proietta un'ombra morbida 2px a destra e 2px verso il basso con una sfocatura di 4px.
Cos'è text-shadow in CSS?
text-shadow è la proprietà CSS che dipinge una o più ombre dietro il testo di un elemento. Ogni ombra accetta fino a quattro valori: uno scostamento orizzontale (X), uno scostamento verticale (Y), un raggio di sfocatura opzionale e un colore — scritto come text-shadow: 1px 1px 2px #000000.
Come posso aggiungere un'ombra in CSS?
Per il testo, usa text-shadow nella regola dell'elemento, es. h1 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }. Per caselle, schede e pulsanti, usa box-shadow. text-shadow segue la forma delle lettere mentre box-shadow segue la casella rettangolare dell'elemento.
Come aggiungere un'ombra al testo in un tool di design?
In uno strumento di design come Figma, Sketch o Photoshop, aggiungi un effetto Drop Shadow a un livello di testo e imposta lo scostamento X/Y, la sfocatura e il colore. Questi quattro valori si mappano quasi uno a uno in CSS: un'ombra Figma di X 2, Y 2, Blur 4, nero 40% diventa text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4).
Come creo un effetto di testo luminoso o neon?
Un bagliore neon è composto da più ombre dello stesso colore vivace sovrapposte con scostamento zero e sfocatura crescente. Esempio: text-shadow: 0 0 5px #00eaff, 0 0 10px #00eaff, 0 0 20px #00eaff, 0 0 40px #0066ff; su testo bianco su sfondo scuro. Carica il preset Neon qui per ottenerlo istantaneamente.
Come creo testo 3D o con ombra lunga?
Entrambi gli effetti usano più ombre con scostamento ma senza sfocatura. Per testo 3D estruso, sovrapponi livelli che scendono e vanno a destra in un colore progressivamente più scuro. I preset 3D e Ombra lunga costruiscono questi stack di livelli per te.
Come creo testo con contorno usando text-shadow?
Posiziona quattro (o otto) ombre dure intorno al testo, una in ogni direzione, con sfocatura 0. Esempio: text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111; dà al testo bianco un sottile contorno scuro.
Come creo più ombre di testo?
Separale con virgole all'interno di una singola dichiarazione text-shadow: text-shadow: 1px 1px 2px #000, 0 0 8px #0ff;. Il browser le dipinge in ordine, con la prima ombra in cima. È così che si costruiscono gli effetti neon, 3D, fuoco e contorno.
text-shadow può essere inset?
No. A differenza di box-shadow, la proprietà text-shadow non ha la parola chiave inset né il raggio di diffusione. Per simulare un aspetto inciso su sfondo chiaro, aggiungi un'ombra chiara sottile appena sotto il testo grigio scuro, es. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);. Il preset Letterpress dimostra esattamente questo trucco.
Come faccio un'ombra di testo in Tailwind CSS?
Tailwind CSS v4 include utility native per le ombre del testo (text-shadow-sm, text-shadow-md, text-shadow-lg). Per un valore personalizzato, usa una proprietà arbitraria dove gli spazi diventano underscore: class="[text-shadow:2px_2px_4px_#00000066]".
Ho bisogno dei prefissi -webkit- o -moz- per text-shadow?
No. text-shadow è completamente standardizzato e supportato senza prefissi in tutti i browser moderni, quindi un semplice text-shadow: 1px 1px 2px #000; è tutto ciò di cui hai bisogno.
Qual è la differenza tra text-shadow e box-shadow?
text-shadow proietta un'ombra dalla forma dei glifi (le lettere stesse), mentre box-shadow proietta un'ombra dalla scatola rettangolare di un elemento. text-shadow non ha raggio di diffusione né opzione inset; box-shadow ha entrambi.
Come aggiungo un'ombra sottile per migliorare la leggibilità del testo?
Usa un'ombra scura morbida a bassa opacità con un piccolo scostamento e pochi pixel di sfocatura — es. text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);. Questo solleva il testo bianco o chiaro da uno sfondo fotografico o sfumato e migliora il contrasto.
Come si confronta con altri strumenti text-shadow come CSSmatic?
CSSmatic ha una sezione di ombra testo, ma gestisce solo un singolo livello — non puoi sovrapporre più ombre per effetti neon, 3D o contorno senza modificare manualmente il codice. UtiloKit è l'unico strumento gratuito che combina sovrapposizione multistrato, preset nominati, anteprima live ed esportazione con un clic in CSS, Tailwind e React Native.
Come copio il CSS dell'ombra testo generato, e funziona offline?
Clicca Copia CSS per una dichiarazione pronta da incollare, Copia Tailwind per la classe di valore arbitrario, o Copia React Native per l'equivalente textShadowColor / textShadowOffset / textShadowRadius. Usa Condividi link per salvare le impostazioni esatte nell'URL. Tutto gratuito senza registrazione, gira localmente e continua a funzionare senza rete una volta caricato.
Related tools
Vedi tutti gli strumenti
Novità Generatore di gradienti CSS
Crea gradienti CSS lineari, radiali e conici con anteprima in tempo reale.
Novità Generatore di box-shadow CSS
Crea box-shadow CSS multilivello con preset e anteprima in tempo reale. Copia all’istante il CSS, il valore o lo stile React.
Novità Generatore di palette di colori
Genera palette complementari, analoghe, triadiche e monocromatiche.
Novità Generatore di curve di Bézier
Progetta una curva di easing CSS trascinando i punti di controllo, con anteprima in tempo reale.
Novità Generatore di border-radius
Crea visivamente angoli arrotondati CSS e forme organiche tipo blob.
Novità Playground CSS Flexbox
Regola le proprietà flex con anteprima in tempo reale e copia il CSS.