Generatore di box-ombre CSS
Craft box-shadow values visually. Set horizontal and vertical offset in pixels, blur radius (soft edge), spread (grow or shrink the shadow before blur), color, opacity, and optional inset for inner shadows.
How to build a box shadow
1. Set X and Y offset — positive X moves shadow right, positive Y moves it down.
2. Adjust blur (softness) and spread (size before blur).
3. Pick shadow color and opacity.
4. Toggle inset if the shadow should appear inside the box; copy CSS.
Ricette ombra
Elevazione della carta morbida
offsetY 8px, sfocatura 24px, diffusione 0, nero al 18% di opacità: una carta mobile in stile materiale: box-shadow: 0 8px 24px rgba(20,20,20,0.18).
Ombra netta
sfocatura 0, diffusione 0, offsetY 4px: bordo netto come un adesivo leggermente sollevato dalla pagina.
Pulsante premuto inserito
Abilita riquadro con piccola sfocatura: simula un controllo premuto o incassato all'interno dell'elemento.
Quando usare questo strumento
• Quando ottimizzi la profondità dell'interfaccia utente per carte, modalità e pulsanti.
• Quando impari come la sfocatura differisce dalla diffusione.
• Quando documenti i token di progettazione con valori di ombra esatti.
Leggere i quattro numeri
box-shadow: 0 8px 24px 0 significa x=0, y=8px in basso, sfocatura=24px, diffusione=0. Ometti la diffusione e la diffusione predefinita del browser è 0. Una grande sfocatura con offset zero crea un bagliore; un ampio offset con una piccola sfocatura crea luce direzionale.
Domande frequenti
Qual è la sintassi box-shadow?
box-ombra: offset-x offset-y sfocatura-raggio diffusione-raggio colore; La parola chiave opzionale inserita crea un'ombra interna.
Sfocatura o diffusione?
La sfocatura ammorbidisce il bordo dell'ombra. La diffusione espande o contrae la forma dell'ombra prima di sfocarla: la diffusione positiva si ingrandisce, quella negativa si restringe.
Quali unità dovrei usare?
Questo strumento restituisce pixel (px), la scelta più comune per le ombre dell'interfaccia utente dello schermo.
Cosa fa l'inserto?
Il riquadro disegna l'ombra all'interno del riquadro del bordo dell'elemento, utile per ingressi o pozzi infossati.
Il colore dell'ombra può essere semitrasparente?
Sì. L'opacità viene applicata al colore scelto, producendo un output RGBA per bordi uniformi su sfondi diversi.