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. The preview box updates live; copy the full box-shadow declaration into your CSS. Understand how each parameter changes elevation and depth without trial-and-error in devtools.
X (px)
Y (px)
Sfocatura (px)
Diffusione (px)
Colore
Opacità (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
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.
Quando scegliere altro
• Quando hai bisogno di più ombre impilate: copia il primo livello qui, quindi aggiungine altri in CSS.
• Quando vuoi text-shadow: proprietà diverse con sintassi simile.
• Quando hai bisogno di un'ombra su forme irregolari PNG — filter: drop-shadow() potrebbe funzionare meglio.
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.
Ombre stratificate
Ombre multiple separate da virgole: box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15); La prima ombra dipinge sotto quelle successive. Combina un'ombra scura e stretta con un'ombra ampia e chiara per una profondità realistica.
Accessibilità e prestazioni
Le ombre pesanti su aree animate di grandi dimensioni possono costare tempo di verniciatura della GPU. Preferisci ombre tenui per le interfacce utente ad alta densità di dati. Assicurati che gli elementi focalizzati rimangano visibili: non fare affidamento solo sull'ombra per mostrare lo stato; accoppiare con bordo o contorno per gli utenti di tastiera.
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.
I valori vengono inviati a un server?
No. Anteprima e CSS sono locali.
E' gratis?
Sì, non è necessario alcun account.