Punti salienti
- 01Ogni parametro di box-shadow ha il suo slider più un input numerico per la regolazione di precisione in pixel.
- 02L'interruttore inset passa tra ombra esterna e ombra interna per effetti premuti o neumorfici.
- 03Colore e opacità sono controllati separatamente, generando rgba() per CSS leggibile.
- 04L'anteprima utilizza la vera proprietà CSS su un elemento reale — quello che vedi è esattamente quello che il tuo foglio di stile renderizza.
Perché usare un generatore visuale di box-shadow
CSS box-shadow accetta fino a sei valori — offset orizzontale, offset verticale, raggio di sfocatura, raggio di espansione, colore e la parola chiave inset opzionale. Digitarli a memoria funziona per ombre semplici, ma per qualcosa di più sfumato — un bagliore stretto, un'ombra esterna profonda, un livello di elevazione morbido — stai indovinando e ricaricando finché non sembra giusto.
Un generatore visuale riduce il ciclo di iterazione. Sposta un slider, vedi il cambiamento istantaneamente e copia solo quando sei soddisfatto. Il generatore box-shadow di Handytool funziona interamente nel tuo browser, quindi l'anteprima è la vera proprietà CSS applicata a un elemento reale — nessuna differenza di rendering tra lo strumento e la tua pagina effettiva.
Come progettare un'ombra
- 01
Regola gli offset orizzontale e verticale
I valori positivi spostano l'ombra a destra e verso il basso. I valori negativi la spostano a sinistra e verso l'alto. Un'ombra centrata (0, 0) crea un effetto bagliore.
- 02
Imposta il raggio di sfocatura
Valori di sfocatura più alti creano ombre più morbide e diffuse. Una sfocatura zero produce un contorno d'ombra duro e solido.
- 03
Regola il raggio di espansione
L'espansione positiva ingrandisce l'ombra prima della sfocatura. L'espansione negativa la riduce, utile per ombre strette sotto l'elemento.
- 04
Scegli un colore e un'opacità
Usa il selettore colore per scegliere la tonalità dell'ombra, quindi riduci l'opacità per la sottigliezza. L'output utilizza rgba() per mantenere i valori leggibili.
- 05
Attiva inset se necessario
Inset passa da un'ombra esterna a un'ombra interna — utile per pulsanti premuti, input incavati e superfici neumorfiche.
- 06
Copia la dichiarazione CSS
Fai clic su Copia per ottenere il valore box-shadow completo e incollalo nel tuo foglio di stile.
Nessun caricamento, nessun account
Il generatore è interamente lato client. Le tue scelte di colore, valori numerici e stati di anteprima rimangono nel tuo browser — nulla viene inviato a un server. Non c'è account da creare e nessun limite di utilizzo.
Poiché l'elemento di anteprima utilizza la vera proprietà CSS box-shadow, l'output è accurato per definizione — non c'è rendering canvas o approssimazione screenshot. I valori in pixel che copi sono i valori in pixel che il browser applica.
Domande frequenti sul generatore di box-shadow
Cosa fa il valore di espansione?
L'espansione positiva ingrandisce l'ombra in tutte le direzioni prima che venga applicata la sfocatura; l'espansione negativa la riduce. Utile per bagliori stretti e definiti se abbinati a una sfocatura bassa.
Posso aggiungere più ombre box?
Questo generatore genera un'ombra alla volta. Per stratificarle, copia il valore e separa più ombre con virgole nel tuo CSS — box-shadow accetta un elenco separato da virgole.
Perché la mia ombra inset è invisibile?
Le ombre inset si disegnano all'interno dell'elemento, quindi hanno bisogno di un colore di sfondo o di padding visibile per apparire. Non appariranno su elementi trasparenti o di dimensioni zero.
L'anteprima è accurata al pixel?
Sì — l'anteprima utilizza la vera proprietà CSS box-shadow su un elemento DOM reale, quindi quello che vedi è esattamente quello che il tuo foglio di stile produrrà.
Cos'è un'ombra neumorfica?
Il neumorfismo utilizza due ombre — una chiara e una scura — offset in direzioni opposte per far sembrare un elemento sollevato o premuto da una superficie piatta. Entrambe le ombre sono tipicamente inset per la variante premuta.