Cosa fa il Generatore di Box Shadow
Questo strumento ti aiuta a costruire una box-shadow CSS senza memorizzare l’ordine dei valori o tirare a indovinare i numeri. Sposti alcuni cursori, scegli un colore e una casella di anteprima dal vivo mostra esattamente come appare l’ombra mentre il CSS corrispondente si aggiorna accanto. Quando ti convince, copi la regola e la inserisci nel tuo foglio di stile. E utile per sviluppatori front-end, designer, studenti che imparano il CSS e chiunque voglia un’ombra pulita per una scheda, un pulsante o un pannello senza tentativi ed errori negli strumenti per sviluppatori del browser.
Come usarlo
- Trascina il cursore dello scostamento orizzontale per spostare l’ombra a sinistra o a destra.
- Trascina il cursore dello scostamento verticale per spostare l’ombra in alto o in basso.
- Imposta il cursore della sfocatura in base a quanto vuoi il bordo morbido o netto.
- Imposta il cursore dell’espansione per ingrandire o ridurre la dimensione dell’ombra.
- Regola il cursore dell’opacita per controllare quanto appare intensa l’ombra.
- Scegli il colore dell’ombra con il selettore di colore.
- Attiva inset se vuoi l’ombra all’interno dell’elemento invece che dietro.
- Osserva l’anteprima e il CSS aggiornarsi dal vivo, poi copia la regola
box-shadowgenerata.
Un esempio veloce
Per un’ombra morbida e moderna, mantieni lo scostamento orizzontale vicino allo zero, imposta un piccolo scostamento verticale positivo, alza parecchio la sfocatura, lascia l’espansione a zero e abbassa l’opacita in modo che l’ombra resti delicata. Questo da il gentile effetto di scheda sollevata che vedi sulla maggior parte delle dashboard. Da li puoi spostare un solo cursore per la messa a punto invece di riscrivere a mano l’intero valore.
Funziona tutto nel tuo browser, quindi non viene caricato nulla. Lo strumento e privato, gratuito e non richiede registrazione.
Domande frequenti
- Quale proprieta CSS crea questo strumento?
- Crea una singola regola box-shadow, per esempio box-shadow: 4px 4px 12px 0 rgba(0,0,0,0.2). Copi quella riga e la incolli nel tuo foglio di stile o in uno stile inline.
- Cosa fa l'interruttore inset?
- Inset disegna l'ombra all'interno dell'elemento invece che dietro, dando un aspetto premuto o di bagliore interno. Lascialo disattivato per un'ombra normale che cade fuori dal box.
- Perche usare espansione e opacita?
- L'espansione ingrandisce o riduce l'ombra prima che venga applicata la sfocatura, quindi un valore positivo la rende piu grande e uno negativo la rientra. L'opacita stabilisce quanto appare intenso il colore dell'ombra, permettendoti di passare da un accenno leggero a un'ombra marcata.