Box Shadow
Generator
Progetta ombre CSS perfette con anteprima live. Regola offset, blur, spread e colore — sovrapponi più layer per la profondità.
① Regola X, Y, blur, spread ② Aggiungi fino a 3 layer ③ Copia il CSS
box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.25);Gli offset X e Y controllano la direzione dell'ombra. X positivo spinge a destra, negativo a sinistra. Y positivo spinge in basso, negativo in alto.
Il raggio blur ammorbidisce i bordi dell'ombra (0 = nitido). Lo spread espande o contrae l'ombra oltre i limiti dell'elemento.
Le ombre inset appaiono all'interno dell'elemento, creando un effetto premuto o incavato invece di un'ombra esterna.
CSS box-shadow — come funziona e quando usarlo
La proprietà CSS box-shadow aggiunge effetti di ombra attorno al frame di un elemento. Accetta offset orizzontale (X), verticale (Y), raggio blur, raggio spread e colore. Usa rgba() con opacità parziale (0.1–0.25) per ombre morbide e realistiche. La parola chiave inset porta l'ombra all'interno, creando effetti pulsante premuto. Sovrapponi più ombre con valori separati da virgola per ottenere i livelli di elevazione Material Design o effetti neumorfismo. box-shadow non influisce sul layout ed è GPU-composited — al contrario di filter: drop-shadow(), che segue il canale alpha e la forma reale dell'elemento.