Generatore di Ombra del Testo
Progetta effetti CSS text-shadow con livelli multipli. Regola offset, sfocatura e colore per ogni livello di ombra.
Funzionalita principali
- Supporto per più livelli di ombra
- Controllo di offset, sfocatura e colore per livello
- Effetti preimpostati (neon, rilievo, retrò, 3D)
- Testo di anteprima modificabile
Guide
La proprieta CSS text-shadow aggiunge livelli di ombra dietro i caratteri del testo. Svolge sia funzioni pratiche sia decorative: migliora la leggibilita del testo su sfondi complessi, crea profondita e dimensione, produce effetti di bagliore al neon, costruisce stili tipografici retrò e vintage e aggiunge una rifinitura discreta a titoli e testo display. Questa guida tratta la sintassi, le tecniche di sovrapposizione, gli effetti comuni, le considerazioni sulle prestazioni e i pattern di design pratici. La sintassi di text-shadow richiede da due a quattro valori piu un colore facoltativo: text-shadow: offset-x offset-y blur-radius color. Il valore offset-x sposta l'ombra orizzontalmente (positivo verso destra, negativo verso sinistra). Il valore offset-y sposta l'ombra verticalmente (positivo verso il basso, negativo verso l'alto). Il valore blur-radius controlla quanto e diffusa l'ombra (0 crea una copia netta, valori piu alti creano ombre piu morbide). Il valore color imposta il colore dell'ombra (se omesso, usa il colore del testo). Esempio: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) crea un'ombra scura morbida spostata verso il basso e a destra. Le ombre multiple sono separate da virgole e ciascuna viene riprodotta in ordine (la prima ombra in cima). Questa capacita di sovrapposizione e cio che abilita gli effetti complessi. text-shadow: 1px 1px 0 #000, 2px 2px 0 #333, 3px 3px 0 #666 crea un effetto 3D impilato con tre livelli di ombra a offset crescenti. La prima ombra (piu vicina al testo) e la piu scura e ogni ombra successiva e piu chiara, simulando la profondita. Non c'e limite al numero di ombre che puoi impilare, anche se le prestazioni degradano con conteggi molto alti (in genere oltre 10-15 livelli sfocati). Il raggio di sfocatura determina il tipo di ombra. Un raggio di sfocatura di 0 crea una copia netta del testo, utile per effetti di estrusione 3D, contorni e ombre impilate. Un piccolo raggio di sfocatura (da 1px a 3px) crea un'ombra discreta e stretta adatta a migliorare la leggibilita del testo. Un raggio di sfocatura medio (da 4px a 8px) crea un'ombra visibile ma morbida per enfatizzare i titoli. Un raggio di sfocatura grande (da 10px a 30px) crea un effetto di bagliore in cui l'ombra si diffonde ben oltre il contorno del testo. Raggi di sfocatura molto grandi (40px e oltre) creano effetti di bagliore ambientale. L'algoritmo di sfocatura e una sfocatura gaussiana, ovvero l'intensita dell'ombra diminuisce in modo uniforme dal centro. Le ombre di leggibilita sono l'applicazione piu pratica. Quando il testo si trova su uno sfondo fotografico, sfumato o con pattern, un'ombra discreta migliora la leggibilita senza aggiungere uno sfondo solido. Per testo chiaro su sfondi vari: text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6). Per testo scuro su sfondi vari: text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8). La chiave e mantenere gli offset piccoli (da 0 a 1px) e la sfocatura morbida (da 2px a 4px) in modo che l'ombra supporti il testo senza essere percepita come un elemento visivo a se stante. Questa tecnica e ampiamente usata nelle sezioni hero, nel testo dei banner e in qualsiasi testo sovrapposto alle immagini. La direzione degli offset dell'ombra comunica una fonte luminosa. Un'ombra spostata verso il basso a destra (x positiva, y positiva) implica una fonte luminosa in alto a sinistra, che e la convenzione piu comune nel design della UI e corrisponde a come percepiamo gli oggetti fisici illuminati dall'alto. Un'ombra spostata dritta verso il basso (x pari a 0, y positiva) implica una fonte luminosa dall'alto. Una direzione coerente dell'ombra in tutti gli elementi di una pagina mantiene l'illusione di una fonte luminosa unificata. Mescolare le direzioni delle ombre (un elemento ombreggiato a destra, un altro a sinistra) crea un'incoerenza visiva. Gli effetti di bagliore al neon usano grandi raggi di sfocatura con colori luminosi e saturati. La tecnica sovrappone piu ombre a offset zero con raggi di sfocatura crescenti. Un effetto al neon di base: text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa. Le ombre interne sono bianche (simulando il nucleo luminoso di un tubo al neon) e le ombre esterne usano il colore del bagliore. Imposta il colore del testo su bianco e lo sfondo su scuro (quasi nero) per l'effetto al neon completo. Abbinalo a un font con tratti sottili (come un font monolinea o script) per imitare l'insegna al neon reale. Il tremolio al neon puo essere aggiunto con animazioni CSS che alternano configurazioni di ombra leggermente diverse. Un'animazione keyframe che alterna l'insieme completo di ombre e una versione ridotta (meno livelli, raggi di sfocatura inferiori) ogni 0,1-0,5 secondi crea un tremolio convincente. Aggiungi variazioni di tempistica dell'animazione (steps(), durate dall'aspetto casuale) per far sembrare il tremolio naturale anziche meccanico. Questo effetto e popolare per le landing page a tema retrò, le interfacce di gioco e i siti portfolio. Gli effetti di estrusione 3D creano l'illusione della profondita impilando ombre nette a offset progressivi. Un effetto di testo 3D di base: text-shadow: 1px 1px 0 #555, 2px 2px 0 #555, 3px 3px 0 #555, 4px 4px 0 #555, 5px 5px 0 #555. Ogni livello e di un pixel piu lontano dal testo, costruendo un aspetto estruso. Per un effetto piu rifinito, scurisci ogni livello successivo: text-shadow: 1px 1px 0 hsl(210, 50%, 40%), 2px 2px 0 hsl(210, 50%, 35%), 3px 3px 0 hsl(210, 50%, 30%), 4px 4px 0 hsl(210, 50%, 25%). L'aggiunta di un'ombra morbida dopo i livelli netti (5px 5px 10px rgba(0,0,0,0.4)) ancorà il testo 3D con un'ombra proiettata. Gli effetti di ombra lunga estendono il concetto di estrusione 3D a molti piu livelli, creando ombre che si estendono attraverso lo sfondo. Un'ombra lunga potrebbe impilare 50 o piu livelli, ciascuno sfalsato di 1px con colore che sfuma gradualmente. Generare queste ombre a mano e impraticabile. Usa un preprocessore CSS (Sass o Less) con un ciclo per generare i livelli di ombra a livello di codice. In Sass: $shadow: (); @for $i from 1 through 50 { $shadow: append($shadow, ($i * 1px $i * 1px rgba(0,0,0, 0.5 - $i * 0.01)), comma); } text-shadow: $shadow. Il risultato e un'ombra diagonale drammatica che si estende dietro il testo. Gli effetti di contorno (stroke) usano piu ombre nette a offset zero o piccolo per creare un contorno del testo. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 posiziona ombre nette in tutti e quattro gli angoli diagonali, circondando il testo con un contorno di 1px. Per un contorno piu completo, aggiungi ombre anche nelle direzioni cardinali: 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000. Per un contorno piu spesso, aumenta gli offset a 2px e aggiungi posizioni intermedie. Nota che il CSS ha anche -webkit-text-stroke per i contorni del testo, che offre risultati piu smussati ma funziona solo nei browser WebKit/Blink. L'approccio con text-shadow e supportato in modo piu universale. Gli effetti di testo retrò e vintage combinano text-shadow con font e palette di colori specifici. Un effetto letterpress (incassato) usa un'ombra scura leggermente sopra e un'ombra chiara leggermente sotto: text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3). Applica questo a testo grigio su sfondo grigio medio. L'ombra scura sopra suggerisce che il testo e premuto nella superficie, mentre l'ombra chiara sotto cattura la luce sul bordo inferiore. Un effetto in rilievo (embossed) inverte le ombre: chiara sopra, scura sotto. Entrambi gli effetti funzionano meglio con pesi di font piu pesanti e palette di colori smorzate. Gli effetti di testo fuoco, ghiaccio ed elementali sovrappongono molte ombre con sfumature di colore. Un effetto fuoco potrebbe usare: text-shadow: 0 0 4px #fefcc9, 0 -2px 6px #feec85, 0 -4px 11px #ffae34, 0 -6px 17px #ec760c, 0 -8px 22px #cd4606, 0 -10px 28px #973716, 0 -14px 40px #451b0e. Ogni livello si sposta verso l'alto (offset y negativo) con sfocatura crescente, passando dal giallo brillante alla base attraverso l'arancione fino al rosso scuro, simulando la fiamma. Un effetto ghiaccio usa la stessa tecnica con toni blu e bianchi, con ombre che si estendono verso il basso. Questi effetti decorativi sono riservati meglio ai titoli su progetti creativi, interfacce di gioco e materiali promozionali. Le prestazioni di text-shadow sono generalmente buone per i casi d'uso tipici (da uno a tre livelli di ombra). Ogni livello di ombra richiede al browser di riprodurre una copia aggiuntiva del testo con il colore, l'offset e la sfocatura specificati. Le ombre nette (blur-radius pari a 0) sono economiche perche sono semplici copie sfalsate. Le ombre sfocate sono piu costose perche il browser deve calcolare una sfocatura gaussiana per ogni livello. Impilare 8 o piu ombre sfocate (come negli effetti al neon) su testo di grandi dimensioni animato o su un'area ridipinta di frequente puo influire sulla frequenza fotogrammi sui dispositivi di fascia bassa. Per testo animato con ombre pesanti, prova sui dispositivi di destinazione e valuta la riduzione del numero di ombre sui dispositivi mobili. L'animazione di text-shadow con transizioni CSS crea effetti hover coinvolgenti. Un pattern comune esegue la transizione da nessuna ombra a un'ombra visibile al passaggio del mouse: transition: text-shadow 0.3s ease. L'animazione tra due ombre complesse multistrato funziona ma richiede che entrambi gli stati abbiano lo stesso numero di livelli di ombra. Se lo stato iniziale ha tre livelli e lo stato hover ne ha cinque, la transizione non interpolera in modo smussato i livelli aggiuntivi (compariranno all'improvviso anziche sfumare). Mantieni i conteggi dei livelli coerenti tra gli stati di animazione per transizioni smussate. Text-shadow con le custom property CSS abilita effetti tematizzabili e gestibili. Definisci le ombre come custom property: --shadow-heading: 2px 2px 4px rgba(0,0,0,0.3). Referenziale nei tuoi stili: text-shadow: var(--shadow-heading). In modalita scura, ridefinisci la proprieta: --shadow-heading: 2px 2px 8px rgba(0,0,0,0.7) (su sfondi scuri serve un'ombra piu forte per lo stesso effetto visivo). Questo approccio mantiene i valori delle ombre in un unico punto e rende il cambio di tema banale. Puoi anche creare token di ombra a livello di componente: --shadow-btn-hover, --shadow-heading-hero, --shadow-text-overlay. La relazione tra text-shadow e scelta del font conta in modo significativo. Font sottili e leggeri producono ombre delicate che possono sembrare eleganti. Font grassetto e pesanti producono ombre spesse e prominenti che richiamano l'attenzione. Font script e decorativi possono produrre ombre disordinate in cui i livelli di ombra sovrapposti dei caratteri adiacenti interferiscono tra loro. Font monospace producono ombre pulite e uniformi perche la larghezza coerente dei caratteri crea una spaziatura uniforme dell'ombra. Prova il tuo effetto di ombra con il font effettivo alla dimensione effettiva. Un effetto che sembra ottimo su una parola campione potrebbe sembrare disordinato in una frase completa. Text-shadow su diversi tipi di sfondo richiede approcci diversi. Su sfondi solidi, hai il pieno controllo e puoi usare qualsiasi tecnica di ombra. Su sfondi sfumati, assicurati che il colore dell'ombra funzioni sull'intera gamma del gradiente. Su immagini, usa ombre che creano contrasto indipendentemente da quale parte dell'immagine si trova dietro il testo (l'approccio dell'ombra di leggibilita funziona meglio qui). Su sfondi trasparenti o semitrasparenti (effetti vetro), text-shadow e spesso essenziale per mantenere la leggibilita perche il colore dello sfondo varia. Per sfondi scuri, usa colori di ombra piu chiari o effetti di bagliore. Per sfondi chiari, usa ombre scure standard. Text-shadow interagisce con text-decoration in modi specifici. Sottolineature, linee sopra e barrate non ricevono ombre. L'ombra si applica solo alle forme dei glifi. Se hai bisogno di testo ombreggiato con una sottolineatura ombreggiata, usa uno pseudo-elemento o border-bottom per la sottolineatura e applichi il suo box-shadow. Analogamente, text-shadow non influisce sul colore di evidenziazione della selezione (pseudo-elemento ::selection). L'ombra rimane visibile dietro il testo selezionato, il che puo creare strani effetti visivi con alcune combinazioni di colori. Text-shadow nel design responsive dovrebbe scalare con la dimensione del font. Un'ombra di 2px che sembra appropriata su un titolo da 48px diventa sproporzionatamente grande su un titolo da 24px sui dispositivi mobili. Usa unita em invece di px per i valori delle ombre per mantenere un ridimensionamento proporzionale: text-shadow: 0.04em 0.04em 0.08em rgba(0, 0, 0, 0.3). Questa ombra si ridimensiona con la dimensione del font, mantenendo la stessa proporzione visiva indipendentemente dalla dimensione effettivamente riprodotta. Per classi di utility responsive, definisci varianti di ombra per i diversi livelli di intestazione. Il confronto tra CSS text-shadow e gli effetti di testo SVG e il rendering del testo su canvas differisce per capacita e prestazioni. SVG offre effetti di testo piu sofisticati tramite filtri, maschere, gradienti e pattern applicati agli elementi di testo. Canvas fornisce controllo a livello di pixel sul rendering del testo con le proprieta shadowBlur, shadowColor e shadowOffsetX/Y. CSS text-shadow e l'opzione piu semplice e performante per il testo web. Usa CSS per gli effetti standard di ombra. Rivolgiti a SVG quando ti servono effetti oltre cio che le ombre CSS offrono. Canvas e appropriato per il rendering dinamico del testo basato sui dati, come grafici e visualizzazioni. La combinazione di text-shadow con altre proprieta di testo CSS crea effetti stratificati. Text-shadow piu background-clip: text (con -webkit-background-clip: text) piu uno sfondo sfumato crea testo con riempimento sfumato e ombra. Text-shadow piu mix-blend-mode su un elemento genitore crea effetti di ombra sfumati in cui l'ombra interagisce con lo sfondo in base alla modalita di fusione. Text-shadow piu filter: drop-shadow() sul genitore crea un'ombra del testo ombreggiato, raddoppiando l'effetto di profondita. Queste combinazioni sono potenti ma richiedono test tra i browser perche il supporto varia. Text-shadow nei client di posta elettronica ha un supporto limitato ma utile. La maggior parte dei client di posta moderni (Gmail, Apple Mail, Outlook su Mac, Yahoo Mail) supporta text-shadow di base. Outlook su Windows (che usa il motore di rendering di Word) non supporta text-shadow. Per il design delle email, usa text-shadow come potenziamento progressivo: l'email sembra buona senza e migliore con. Mantieni gli effetti semplici (singolo livello, piccolo offset, sfocatura modesta) perche le ombre multistrato che sembrano ottime sul web possono essere riprodotte in modo imprevedibile nei client di posta. I fogli di stile di stampa dovrebbero in genere rimuovere text-shadow. Le ombre aggiungono peso visivo sullo schermo ma possono sembrare fangose nella stampa, specialmente su stampanti a getto d'inchiostro. Usa @media print { * { text-shadow: none; } } per rimuovere tutte le ombre del testo nell'output di stampa. Se ombre specifiche servono a uno scopo funzionale nella stampa (come garantire il contrasto del testo su uno sfondo colorato), conservale selettivamente rimuovendo le ombre decorative. Le differenze di rendering del browser in text-shadow sono minori ma esistenti. I browser basati su Chromium, Firefox e Safari supportano tutti text-shadow con sintassi identica ma possono riprodurre la sfocatura in modo leggermente diverso. Firefox tende a produrre raggi di sfocatura piu stretti di Chrome per lo stesso valore. Safari puo gestire i valori di sfocatura molto grandi in modo diverso agli estremi. Queste differenze sono raramente percettibili nell'uso pratico ma possono essere importanti per i design pixel-perfect. Se l'aspetto esatto dell'ombra e importante, prova su tutti i browser di destinazione e regola i valori per browser usando feature query CSS o il rilevamento dello user agent come ultima risorsa. Le prestazioni di text-shadow nei framework CSS possono essere gestite tramite classi di utility. Tailwind CSS fornisce utility per le ombre che funzionano bene per box-shadow ma richiede una configurazione personalizzata per text-shadow. Aggiungi le utility text-shadow alla tua configurazione Tailwind: estendi il tema con valori textShadow e crea un plugin che generi le corrispondenti classi di utility. Questo ti offre classi come text-shadow-sm, text-shadow-md, text-shadow-lg e text-shadow-glow che mantengono la coerenza in tutto il progetto senza stili inline ripetitivi. La generazione di valori text-shadow a livello di codice e necessaria per effetti con molti livelli. Una funzione JavaScript che genera un effetto di estrusione 3D: const layers = Array.from({length: depth}, (_, i) => (i+1) + 'px ' + (i+1) + 'px 0 ' + color).join(', '). Per effetti al neon, una funzione puo generare livelli di bagliore concentrici con sfocatura crescente: const glow = radii.map(r => '0 0 ' + r + 'px ' + color).join(', '). La memorizzazione di questi valori generati nelle custom property CSS (--shadow-3d, --shadow-neon) mantiene il CSS pulito mentre JavaScript gestisce la complessa logica di generazione. Text-shadow con i variable font crea possibilita interessanti. Poiche i variable font consentono transizioni di peso smussate, combinare un font-weight animato con un text-shadow animato di conseguenza crea testo che sembra diventare piu pesante e proiettare un'ombra piu profonda simultaneamente. Imposta entrambe le proprieta in una transizione o animazione CSS: la transizione di font-weight da 400 a 700 mentre la transizione di text-shadow da 1px 1px 2px rgba(0,0,0,0.2) a 2px 2px 6px rgba(0,0,0,0.4) produce un'animazione coesa di peso e profondita. Le considerazioni di accessibilita per text-shadow sono semplici: le ombre non devono ridurre la leggibilita del testo. Un errore comune e usare un colore del testo che fa affidamento sulla sua ombra per il contrasto. Se l'ombra non viene riprodotta (client di posta piu vecchi, alcuni strumenti di accessibilita, fogli di stile di stampa), il testo deve rimanere leggibile rispetto al suo sfondo di per se. Usa text-shadow per migliorare la leggibilita, non per crearla. Il colore del testo di base dovrebbe superare i requisiti di contrasto WCAG rispetto allo sfondo indipendentemente da qualsiasi ombra. La modalita alto contrasto di Windows rimuove del tutto text-shadow, quindi il tuo design deve funzionare senza di essa. Lo strumento generatore di text-shadow consente di aggiungere, rimuovere e configurare visivamente piu livelli di ombra, regolando offset, sfocatura e colore per ogni livello mentre vedi il risultato in tempo reale. Questo approccio visivo e piu veloce rispetto alla codifica manuale delle ombre multistrato, in particolare per effetti complessi come bagliori al neon o estrusioni 3D in cui l'interazione tra i livelli determina l'aspetto finale. Copia il CSS generato nel tuo foglio di stile e regolalo in base alle esigenze del tuo contesto specifico.
Domande frequenti
Posso aggiungere più ombre al testo?
Sì, puoi aggiungere livelli di ombra illimitati. Ogni livello può avere il proprio offset, raggio di sfocatura e colore.
Come influisce text-shadow sulle prestazioni?
Le ombre del testo sono accelerate via GPU nei browser moderni e hanno un impatto minimo sulle prestazioni per un uso tipico.
