Generatore Box Shadow
Generatore box-shadow CSS gratuito online, anteprima in tempo reale
Sintassi CSS box-shadow
La proprietà CSS box-shadow aggiunge effetti ombra attorno a un elemento. Sintassi: box-shadow: [inset] offset-x offset-y blur spread colore. Ombre multiple possono essere separate da virgole. Usa l'editor visuale per regolare i valori e vedere il risultato in tempo reale.
Come usare il generatore di Box Shadow
Regola i cursori per offset X, offset Y, raggio di sfocatura e raggio di espansione. Scegli un colore per l'ombra e attiva/disattiva l'opzione inset. Il codice CSS generato si aggiorna in tempo reale e può essere copiato negli appunti.
▶Qual è la differenza tra blur e spread?
Blur controlla la morbidezza dei bordi dell'ombra (0 = bordo netto, valori più alti = più morbido). Spread espande o contrae l'ombra in tutte le direzioni. Uno spread positivo rende l'ombra più grande dell'elemento.
▶Posso aggiungere ombre multiple?
Sì, CSS supporta ombre multiple separate da virgole: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);. Combina ombre sottili per un effetto di profondità più realistico.
▶Cosa fa l'ombra inset?
Un'ombra inset appare all'interno dell'elemento invece che all'esterno. Crea l'impressione che l'elemento sia premuto verso l'interno, come un campo di testo o un pulsante incassato.