Utilore

Generatore di ombre CSS

Muovi i cursori e l’anteprima cambia con loro. Impila i livelli quando una sola ombra non basta: è così che si ottiene la profondità morbida e credibile delle interfacce vere.

Livelli

Preimpostazioni

Come si usa

  1. Scegli che cosa stai ombreggiando: un blocco o del testo.
  2. Imposta offset, sfocatura e colore: l’anteprima si ridisegna all’istante.
  3. Aggiungi un livello se ti serve profondità: due o tre ombre leggere si leggono meglio di una pesante.
  4. Copia la riga CSS sotto i controlli.

Da sapere

Perché il text-shadow ha meno impostazioni

La proprietà text-shadow accetta solo offset, sfocatura e colore. L’estensione e il modo interno appartengono al solo box-shadow, e un valore in più rende invalida l’intera dichiarazione: il browser la scarta in silenzio e l’ombra semplicemente sparisce. Passando alla modalità testo, quei due controlli vengono nascosti invece di sperare che siano ignorati.

Più livelli leggeri battono uno pesante

Un’ombra vera non è uniforme: è densa proprio sotto l’oggetto e si dissolve allontanandosi. Un’unica ombra con una sfocatura ampia dà un alone grigio, mentre due o tre livelli con offset diversi e opacità bassa danno la profondità che si vede nelle interfacce fatte bene. Lo strumento tiene separato ogni livello, e la riga copiata li elenca in ordine.

Domande frequenti

Che cosa fa l’estensione?

Ingrandisce o riduce l’ombra prima che venga applicata la sfocatura. Un valore negativo la tira verso l’interno, così non sborda ai lati: è il trucco dietro le ombre pulite delle schede, dove l’alone deve restare sotto il blocco invece che intorno.

Come faccio un’ombra interna?

Spunta «Ombra interna»: la parola chiave inset compare all’inizio della riga e l’ombra si sposta dentro il blocco. Si usa per i pulsanti premuti e i campi di input, dove la profondità deve leggersi come un incavo, non come un rilievo.

Perché la mia ombra è invisibile?

Il più delle volte l’opacità è a zero, oppure offset e sfocatura sono entrambi a zero e l’ombra si nasconde esattamente dietro il blocco. Sparisce anche se il genitore dell’elemento ha overflow: hidden e l’ombra cade fuori dall’area visibile.

Funziona in tutti i browser?

Sì. Sia box-shadow sia text-shadow sono standard da anni e non richiedono prefissi; i valori prodotti da questo strumento sono CSS puro, senza estensioni proprietarie.

Strumenti correlati