Generatore CSS Box Shadow
Genera la dichiarazione CSS box-shadow impostando scostamenti, raggio di sfocatura, diffusione, colore e ombra interna.
Esegui lo strumento
Questo generatore online crea la dichiarazione CSS `box-shadow` per elementi grafici e componenti web. L'interfaccia permette di impostare lo scostamento orizzontale, lo scostamento verticale, il raggio di sfocatura e il raggio di diffusione in pixel, oltre al colore in formato esadecimale con canale alfa. Selezionando l'opzione interna, la regola aggiunge la parola chiave `inset` per proiettare l'ombra verso l'interno del riquadro anziché all'esterno. I valori predefiniti configurano un'ombra delicata con scostamenti a 2 px, sfocatura a 5 px, diffusione a 0 px e colore semitrasparente `#00000033`. Puoi azzerare i parametri numerici per rimuovere l'effetto di traslazione oppure combinare sfocature ampie per pulsanti, schede o finestre modali. Il codice generato presenta la sintassi standard pronta per essere copiata e inserita nei fogli di stile CSS del tuo progetto. Ogni modifica ai campi numerici o al selettore di colore aggiorna la stringa finale senza richiedere calcoli manuali.
Istruzioni
- Inserisci lo scostamento orizzontale e verticale in pixel nei rispettivi campi.
- Imposta il raggio di sfocatura e l'eventuale raggio di diffusione desiderato.
- Digita il codice colore, ad esempio un valore esadecimale come #00000033.
- Spunta la casella dell'ombra interna se desideri un effetto inset all'interno del riquadro.
- Avvia l'elaborazione per visualizzare la riga CSS completa da copiare nel tuo foglio di stile.
Esempi
- Impostando Offset X a 4, Offset Y a 4, Blur a 10, Spread a 0, colore #00000040 e Inset disattivato, il pannello restituisce la regola box-shadow: 4px 4px 10px 0px #00000040;
- Impostando Offset X a 0, Offset Y a 2, Blur a 8, Spread a 1, colore #00000022 e Inset attivo, il pannello restituisce la regola box-shadow: inset 0px 2px 8px 1px #00000022;
FAQ
A cosa serve l'opzione Inset?
L'opzione Inset include la parola chiave corrispondente nella regola CSS, proiettando l'effetto ombra all'interno dei bordi dell'elemento invece che all'esterno.
Posso inserire valori pari a zero per scostamento o sfocatura?
Sì, puoi impostare zero per lo scostamento orizzontale, lo scostamento verticale, la sfocatura e la diffusione per creare ombre nette oppure perfettamente centrate.
Quale formato di colore posso utilizzare?
Puoi utilizzare valori esadecimali a sei o otto cifre, come la notazione predefinita #00000033 con canale di trasparenza alfa, o altre definizioni testuali valide in CSS.
Come si inserisce il codice ottenuto nel foglio di stile?
Copia la proprietà box-shadow mostrata nel risultato e incollala all'interno del blocco di stile relativo al selettore CSS che intendi personalizzare.