In breve
- La proprietà CSS text shadow richiede uno scostamento orizzontale, uno verticale, un raggio di sfocatura facoltativo e un colore.
- Su uno stesso testo si possono sovrapporre più ombre separandole con virgole, e la prima dell’elenco è disegnata in cima.
- A differenza di box-shadow, text-shadow non ha un valore di diffusione né la parola chiave inset.
- Le ombre nette con scostamento e senza sfocatura sono lo stile decorativo più utile, dai titoli retrò alle lunghe ombre.
- Un’ombra scura e morbida è un rimedio debole per il testo su un’immagine affollata; uno scrim, un’immagine più scura o uno sfondo più calmo fanno il lavoro come si deve.
In questa pagina
Una text shadow in CSS si scrive text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4): uno scostamento orizzontale, uno verticale, un raggio di sfocatura facoltativo e un colore. Separa più ombre con virgole per sovrapporle. È ottima per effetti decorativi come titoli con scostamento netto, lunghe ombre e finti contorni. È uno strumento povero per rendere leggibile il testo su una foto affollata, e le alternative migliori sono più sotto.
Sintassi di text-shadow
/* offset-x | offset-y | blur-radius | color */
h1 { text-shadow: 2px 3px 6px rgb(0 0 0 / 0.35); }
/* No blur: a hard copy of the letters */
h1 { text-shadow: 3px 3px 0 #f97316; }
/* Colour first is also valid */
h1 { text-shadow: #f97316 3px 3px; }
/* Several shadows: the first is drawn on top */
h1 { text-shadow: 2px 2px 0 #fde68a, 4px 4px 0 #f97316; }
/* Remove an inherited shadow */
h1 { text-shadow: none; }Obbligatoria
Cosa fa
Obbligatoria
Cosa fa
Obbligatoria
Cosa fa
Cosa fa
currentcolorinset. Appartengono a box-shadow, che ombreggia il box dell’elemento e non le sue lettere.L’ombra è disegnata dietro il testo e prende la forma di ogni glifo, comprese sottolineature e decorazioni. Non cambia il layout: un grande scostamento può uscire dall’elemento e sovrapporsi ai vicini senza spingerli via, quindi lascia spazio con il padding se l’ombra è grande.
Esempi di text shadow da copiare
Gli stili che reggono sono quelli dai bordi netti. Un’ombra senza sfocatura si legge come una scelta grafica voluta; una sfocatura grigia e morbida sotto il testo corrente tende a sembrare un errore.
/* 1. Subtle lift for large display type on a light page */
.lift { text-shadow: 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 3px rgb(15 23 42 / 0.18); }
/* 2. Retro offset in a second colour */
.retro { color: #1e1b4b; text-shadow: 4px 4px 0 #f472b6; }
/* 3. Double offset, poster style */
.double { color: #fff7ed; text-shadow: 3px 3px 0 #f97316, 6px 6px 0 #7c2d12; }
/* 4. Long shadow: many 1px steps */
.long {
color: #fef3c7;
text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #b45309,
4px 4px 0 #b45309, 5px 5px 0 #b45309, 6px 6px 0 #b45309,
7px 7px 0 #b45309, 8px 8px 0 #b45309;
}
/* 5. Pressed in: a light edge below dark text on a mid tone */
.pressed { color: #334155; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); }Scostamenti retrò e lunghe ombre sono trattati in modo visivo in effetti testo retrò e effetti testo 3D. Per un contorno pulito, preferisci -webkit-text-stroke con paint-order: stroke fill al vecchio trucco delle quattro ombre ai quattro angoli, che lascia vuoti sulle curve; testo con contorno mostra entrambi.
Perché un’ombra morbida è un rimedio debole alla leggibilità
L’uso più comune di text-shadow è una sfocatura scura dietro testo bianco su una foto, nella speranza di separare i due. Aiuta un poco ai bordi di ogni lettera e non fa nulla per lo spazio al loro interno, dove la foto resta visibile a piena forza. Se alzi sfocatura e opacità finché funziona, ottieni una macchia intorno a ogni parola. Gli aloni attorno al testo, chiari o scuri, sembrano datati e falliscono comunque nelle parti più luminose dell’immagine.
Anche i verificatori di contrasto ignorano le ombre. Misurano il colore del testo contro il colore dello sfondo, quindi un titolo che passa solo grazie all’ombra verrà segnalato in un audit, e a ragione. Le soglie sono in contrasto dei colori e accessibilità.
L’ombra come stampella
- Alone nero sfocato dietro testo bianco
- Fallisce dove l’immagine è più luminosa
- Gli strumenti di contrasto segnalano comunque un errore
- Bordi impastati sul testo piccolo
Correggi lo sfondo
- Uno scrim a gradiente sotto le parole
- Scurisci o desatura l’immagine
- Sposta il testo nella zona più calma
- Scegli uno sfondo pensato per reggere le parole
Alternative migliori per testo su immagini e gradienti
Uno scrim è un gradiente che scurisce solo la parte dell’immagine dietro il testo, svanendo nel nulla altrove. Mantiene luminosa la foto dove conta e dà a ogni lettera lo stesso fondo calmo. Overlay a gradiente in CSS tratta tutta la sovrapposizione dei livelli.
linear-gradient(to top, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.45) 35%, rgb(2 6 23 / 0) 70%).card {
background-image:
linear-gradient(to top, rgb(2 6 23 / 0.78), rgb(2 6 23 / 0) 70%),
url("/images/harbour.jpg");
background-size: cover;
background-position: center;
color: #f8fafc;
}Altre opzioni affidabili: passa l’immagine in filter: brightness(0.75) su un livello a parte, ritaglia in modo che le parole cadano su cielo o muro invece che sui dettagli, oppure metti il testo su una fascia piena. Testo sulle immagini le spiega una per una con esempi.
Parole chiare sulla parte più luminosa dello sfondo. Un’ombra sfocherebbe soltanto il problema.
Qui è lo sfondo ad approfondirsi dietro la riga, così le parole si leggono senza alcun effetto su di loro.
È esattamente il lavoro che i Mark di Gradiently fanno da soli: la zona più calma si sposta dietro le tue parole e Inchiostro automatico sceglie il testo chiaro o scuro riga per riga, senza ombre, riquadri o sfocature. Quando vuoi l’ombra come decorazione e non come riparazione, i suoi trattamenti per le lettere come Estrusione, Doppio e Scia ti danno stili con scostamento senza scrivere una sola ombra.
Text shadow sul testo a gradiente
Il testo a gradiente si fa con background-clip: text e un colore di testo trasparente. Aggiungi una text-shadow e l’ombra si vede direttamente attraverso le lettere trasparenti, impastando il gradiente dall’interno. La soluzione è ombreggiare l’elemento: filter: drop-shadow(3px 3px 0 #1e1b4b) segue la forma disegnata delle lettere e sta dietro di loro. La tecnica in sé è trattata in testo a gradiente in CSS.
Prestazioni e animazione
Le ombre nette costano poco. Raggi di sfocatura grandi su lunghi passaggi di testo costano di più da disegnare, e animare text-shadow ridisegna il testo a ogni fotogramma. Se vuoi animare un titolo, spostalo con transform e tieni ferma l’ombra.
Le domande più frequenti
Qual è la sintassi di text-shadow in CSS?
text-shadow: offset-x offset-y blur-radius color, per esempio 2px 2px 4px #000. Sono obbligatori solo i due scostamenti.
Posso aggiungere più di una text shadow?
Sì. Separa le ombre con virgole. La prima dell’elenco è disegnata sopra le altre.
text-shadow ha un valore di diffusione?
No. La diffusione e inset esistono solo su box-shadow. Per ispessire un’ombra del testo, sovrapponi più ombre con piccoli scostamenti.
text-shadow migliora l’accessibilità?
Non in modo affidabile. I controlli di contrasto ignorano le ombre, quindi il testo deve raggiungere il contrasto richiesto con il suo sfondo anche senza.
Come rendo leggibile il testo bianco su una foto senza text-shadow?
Sovrapponi uno scrim scuro a gradiente dietro l’area del testo, scurisci l’immagine, oppure metti le parole su una zona calma della foto.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo