Generatore Text Shadow CSS
Generatore online gratuito di text-shadow CSS. Sovrapponi più livelli d'ombra con offset, sfocatura, colore e opacità, prova preset come Neon, 3D o Retro e copia il CSS all'istante.
Cos'è la proprietà text-shadow in CSS?
text-shadow aggiunge effetti ombra ai glifi del testo. Ogni ombra è definita da un offset orizzontale, uno verticale, un raggio di sfocatura facoltativo e un colore, e più ombre possono essere combinate in un unico valore separato da virgole per creare effetti ricchi.
Come funzionano i molteplici livelli d'ombra?
I livelli vengono disegnati dal basso verso l'alto nell'ordine di dichiarazione, quindi la prima ombra della lista appare sopra le altre. Questo generatore permette di aggiungere, rimuovere, attivare e disattivare livelli, ognuno con offset, sfocatura, colore e opacità propri, per impilare effetti come Neon o 3D.
Cosa significano offset X, offset Y e sfocatura?
L'offset X sposta l'ombra a sinistra o a destra dei glifi, l'offset Y in alto o in basso, e il raggio di sfocatura ammorbidisce i bordi: 0 dà un bordo netto come negli stili Retro o Contorno, valori maggiori diffondono il colore come un bagliore.
Come creo un effetto neon?
Usa il preset Neon o configura più livelli con offset zero, lo stesso colore brillante e valori di sfocatura crescenti, ad esempio 0 0 3px, 0 0 8px e 0 0 20px. Gli aloni impilati simulano il bagliore di un tubo al neon.
text-shadow influisce sulle prestazioni di rendering?
Pochi livelli statici costano poco, ma il testo con molte ombre molto sfocate costa di più da ridisegnare. Ombre pesanti su paragrafi lunghi o animare text-shadow di continuo può far perdere fotogrammi su dispositivi mobili o datati: preferisci titoli brevi, sfocature moderate, o anima l'opacità.
Come rendo un'ombra semi-trasparente?
Ogni livello ha uno slider di opacità che converte il colore scelto in notazione rgba, ad esempio rgba(0, 0, 0, 0.5). Le ombre semi-trasparenti si fondono con qualsiasi sfondo, come fa il preset Carta per un effetto letterpress morbido.
Qual è la differenza tra text-shadow e box-shadow?
text-shadow si applica alla forma dei glifi e non ha valori di diffusione né interni, mentre box-shadow circonda il riquadro di qualsiasi elemento. Condividono la sintassi di offset e sfocatura, ma non si sostituiscono.
Quali browser supportano text-shadow?
text-shadow è supportato da tutti i browser moderni, inclusi Chrome, Firefox, Safari, Edge e Opera, ed è stabile senza prefissi da oltre un decennio. Le ombre a più livelli funzionano allo stesso modo ovunque.
Quello che scrivo viene caricato su un server?
No. Il testo di anteprima e tutti i livelli configurati restano nel tuo browser e il CSS viene generato localmente nella pagina. Nulla viaggia sulla rete, quindi lo strumento funziona anche offline una volta caricato.
Come usare Generatore Text Shadow CSS
Progetta ombre del testo CSS sovrapponendo livelli invece di indovinare un singolo offset. Ogni modifica si rende su un grande testo di anteprima in diretta, e il CSS viene generato localmente nel tuo browser.
- Digita le tue parole nel campo Testo di anteprima per provare l'effetto su un testo vero.
- Prova un preset: Neon, Carta, 3D, Retro, Bagliore o Contorno carica livelli pronti.
- Regola Offset X, Offset Y, Sfocatura, Colore e Opacità di ogni livello con i suoi cursori.
- Usa Aggiungi livello per impilare altre ombre, togli la spunta a un livello per disattivarlo, o eliminalo con l'icona del cestino.
- Copia la regola text-shadow generata e incollala nel tuo foglio di stile.
I bagliori al neon rendono meglio con tre o quattro livelli dello stesso colore e sfocatura crescente — tieni gli offset a zero e lascia che sia la sfocatura a fare il lavoro.
Strumenti correlati
- Generatore Box Shadow CSS Generatore online gratuito di box-shadow CSS. Crea visivamente ombre bellissime con offset, sfocatura, diffusione, colore e inset regolabili. Anteprima live e copia codice istantanea.
- Generatore Gradienti CSS Crea stupendi gradienti CSS visivamente. Genera gradienti lineari, radiali e conici con più punti di colore, angoli e posizioni. Copia istantaneamente codice CSS pronto per la produzione.
- Generatore di Testo Stilizzato Generatore di testo stilizzato gratuito con 28 stili Unicode. Crea testo in grassetto, corsivo, gotico e cerchiato per bio Instagram, TikTok, WhatsApp e nick di gioco.
- Generatore di Border Radius Generatore di border radius creativo gratuito online. Trascina 8 punti o scegli una forma blob per creare figure CSS organiche e copiare il codice all'istante.
- Convertitore Colore Convertitore colore online gratuito. Converti formati HEX, RGB, HSL, HSV istantaneamente con selettore visivo. 100% privato, funziona nel tuo browser.
- Generatore di Easing CSS Generatore online gratuito di easing CSS. Trascina i punti di controllo del cubic-bezier su una curva interattiva, scegli tra 18 preset, guarda una pallina in loop e copia la funzione di timing all'istante.
- Generatore Clip Path CSS Generatore online gratuito di clip-path CSS. Crea forme polygon, circle, ellipse e inset con punti trascinabili, anteprima live e copia del codice CSS in un clic.
- Abbellitore CSS Formatta e abbellisci il codice CSS istantaneamente. Converti CSS minificato in codice leggibile e ben indentato con opzioni personalizzabili.