Generatore CSS Box Shadow
Cos'è il CSS Box Shadow?
La proprietà CSS box-shadow aggiunge effetti ombra intorno al bordo di un elemento. Le ombre possono essere spostate, sfocate, diffuse, colorate e impostate come inset (ombra interna). Più ombre separate da virgole possono essere sovrapposte per effetti ricchi. Questo generatore ti permette di costruire ombre multi-livello complesse visivamente e di copiare il CSS pronto per incollarlo negli appunti.
Come usare il Generatore di Box Shadow
-
Regola i cursori per Offset X/Y, Blur e Spread per posizionare e dare forma all'ombra.
-
Clicca sul campione di colore per scegliere un colore ombra e usa il cursore Opacity per la trasparenza.
-
Attiva 'Inset' per creare un bagliore interno o un effetto premuto.
-
Clicca su '+ Aggiungi livello' per sovrapporre più ombre.
-
Copia il CSS generato e incollalo nel tuo foglio di stile.
Domande Frequenti
Qual è la differenza tra box-shadow e il filtro drop-shadow? box-shadow aggiunge ombre intorno al riquadro del bordo rettangolare dell'elemento e supporta le ombre inset. Il filtro CSS: drop-shadow() si applica alla forma visiva dell'elemento (inclusa la trasparenza), facendola seguire i contorni non rettangolari come i PNG con sfondi trasparenti.
Come creo un effetto di elevazione della scheda Material Design? Sovrapponi due ombre di casella: un'ombra ambientale morbida (grande sfocatura, bassa opacità, leggera diffusione) e un'ombra chiave (minore sfocatura, maggiore opacità, offset direzionale). Ad esempio: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
La box-shadow influisce sul layout della pagina? No. box-shadow non influisce sulla dimensione o sulla posizione dell'elemento nel flusso del documento. A differenza di outline, non occupa spazio di layout e non sposterà altri elementi intorno.
Posso animare box-shadow? Sì. box-shadow è animabile con transizioni e animazioni CSS. Per le prestazioni, preferisci di transizionare box-shadow solo quando necessario — i browser non possono accelerare con GPU i cambiamenti di box-shadow così efficientemente come transform o opacity.
Keywords: generatore CSS box shadow, box-shadow CSS, strumento ombra CSS, CSS drop shadow, ombra interna, ombra multi-livello, CSS shadow online