Proprietà CSS text-shadow
Usa la proprietà CSS text-shadow per aggiungere ombre al testo. Scopri i valori della proprietà e prova gli esempi.
La proprietà CSS text-shadow aggiunge una o più ombre al testo di un elemento. È una delle proprietà CSS3 ed è ampiamente utilizzata per effetti di profondità sottile, bagliori luminosi e per migliorare la leggibilità del testo su sfondi molto elaborati.
Questa pagina illustra la sintassi, tutti i valori, come sovrapporre più ombre, gli effetti visivi più comuni (ombra, bagliore, testo in rilievo), note sull'accessibilità e le differenze tra text-shadow e box-shadow.
Come funziona
Una singola ombra è descritta da 2 o 3 valori di lunghezza seguiti da un <color> opzionale:
- x-offset (primo valore, obbligatorio) — la distanza orizzontale. Un valore positivo sposta l'ombra verso destra, un valore negativo verso sinistra.
- y-offset (secondo valore, obbligatorio) — la distanza verticale. Un valore positivo sposta l'ombra verso il basso, un valore negativo verso l'alto.
- blur-radius (terzo valore, opzionale) — quanto è morbida l'ombra. Valori più grandi producono un'ombra più morbida e diffusa. Non può essere negativo; il valore predefinito è
0(ombra netta). - color (opzionale) — il colore dell'ombra. Se omesso, i browser usano il valore
colordell'elemento. Puoi scegliere tra i colori HTML e usare nomi, valori esadecimali,rgb(),rgba(),hsl()ohsla().
L'x-offset e lo y-offset sono obbligatori; il blur-radius e il colore sono opzionali. Il colore e i due offset possono essere scritti in qualsiasi ordine, ma i valori degli offset devono mantenere l'ordine x, y, blur.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditato | Sì. |
| Animabile | Sì. |
| Versione | CSS3 |
| Sintassi DOM | object.style.textShadow = "1px 3px 3px #8ebf42"; |
Sintassi
Sintassi della proprietà CSS text-shadow
text-shadow: h-shadow v-shadow [blur-radius] [color] | none | initial | inherit;Esempio della proprietà text-shadow:
Esempio della proprietà CSS text-shadow
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.shadow {
text-shadow: 2px 2px #1c87c9;
}
</style>
</head>
<body>
<h2>Text-shadow property example</h2>
<p>Some paragraph for example.</p>
<p class="shadow">Some paragraph with the text-shadow property.</p>
</body>
</html>Risultato
Esempio della proprietà text-shadow con i valori "x-offset", "y-offset", "blur-radius" e "color":
Esempio della proprietà CSS text-shadow con x-offset, y-offset, blur-radius e color specificati
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 5px 3px 2px #8ebf42;
font: 1em Roboto, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h2>Text-shadow property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>Sovrapporre più ombre
Puoi applicare più ombre allo stesso testo separandole con delle virgole. Le ombre vengono disegnate dall'avanti verso il retro: la prima ombra nell'elenco si trova in cima, e ogni ombra successiva viene disegnata dietro la precedente. Questa è la base per effetti di bagliore, contorno e tridimensionalità.
/* a soft glow built from two stacked shadows */
.glow {
color: #fff;
text-shadow:
0 0 5px #8ebf42,
0 0 15px #8ebf42;
}
/* a simple two-tone outline */
.outline {
text-shadow:
1px 1px 0 #1c87c9,
-1px -1px 0 #1c87c9;
}Effetti comuni
| Effetto | Valore di esempio | Cosa fa |
|---|---|---|
| Ombra sottile | text-shadow: 1px 1px 2px rgba(0,0,0,0.4); | Solleva leggermente il testo dalla pagina. |
| Bagliore neon | text-shadow: 0 0 8px #0ff, 0 0 16px #0ff; | Due ombre sfocate sovrapposte dello stesso colore. |
| Rilievo (inciso) | text-shadow: 0 1px 1px rgba(255,255,255,0.6); | Un'ombra chiara sotto testo scuro crea un effetto inciso. |
| Leggibilità su foto | text-shadow: 0 1px 3px rgba(0,0,0,0.8); | Una sfocatura scura dietro il testo chiaro lo rende leggibile. |
Usa text-shadow per la leggibilità e la decorazione, non come sostituto di un contrasto reale. Ombre pesanti o a basso contrasto possono rendere il testo più difficile da leggere per alcuni utenti, quindi mantieni sempre un contrasto testo/sfondo solido di per sé.
text-shadow vs box-shadow
text-shadow disegna un'ombra attorno ai glifi (le forme delle lettere) del testo, mentre box-shadow disegna un'ombra attorno alla scatola rettangolare di un elemento. Usa text-shadow quando vuoi che l'ombra segua il contorno dei caratteri, e box-shadow per card, pulsanti e altri elementi UI con forma rettangolare.
Valori
| Valore | Descrizione |
|---|---|
h-shadow | L'offset orizzontale (asse x). Un valore positivo disegna l'ombra a destra, uno negativo a sinistra. |
v-shadow | L'offset verticale (asse y). Un valore positivo disegna l'ombra sotto il testo, uno negativo sopra. |
blur-radius | Definisce quanto è grande e sfocata l'ombra. I valori negativi non sono consentiti. Il valore predefinito è 0. |
color | Il colore dell'ombra. Si possono usare nomi di colore, codici esadecimali, rgb(), rgba(), hsl() e hsla(). |
none | Nessuna ombra applicata. Questo è il valore predefinito della proprietà. |
initial | Imposta la proprietà al suo valore predefinito (none). |
inherit | Eredita la proprietà dall'elemento genitore. |
Supporto dei browser e proprietà correlate
text-shadow è supportato in tutti i browser moderni. L'ombra non influisce sul layout — viene disegnata all'esterno del box e non modifica mai le dimensioni dell'elemento né la posizione del contenuto circostante.
Letture correlate: box-shadow, color, opacity, text-decoration e gli pseudo-elementi ::first-letter e ::first-line a cui si applica anche text-shadow.