Generatore di box-shadow

Generatore box shadow: ombre CSS a più livelli

Una scheda con una sola ombra sembra spesso incollata alla pagina. Con due o tre livelli di sfocatura crescente, invece, si stacca. Questo generatore box shadow gestisce fino a sei livelli, mostra ogni modifica su un riquadro di anteprima e scrive la dichiarazione box-shadow completa. All’apertura è già attivo il preset «A livelli».

Dal cursore al foglio di stile

1. Fai clic su un preset oppure cambia i valori del primo livello con il cursore o il campo numerico.
2. «Aggiungi livello» crea una nuova ombra. Le frecce cambiano l’ordine, il pulsante di copia duplica il livello e il cestino lo elimina.
3. Imposta «Colore del riquadro», «Colore della pagina» e «Raggio degli angoli» come nel tuo progetto, così l’anteprima mostra l’ombra sullo sfondo vero.
4. «Copia CSS» prende l’intera dichiarazione, «Copia solo il valore» la parte dopo i due punti.

Cosa finisce nella riga di output

Il primo livello dell’elenco viene disegnato sopra gli altri: CSS legge la lista separata da virgole in quell’ordine e lo strumento non riordina nulla. Gli zeri perdono l’unità, quindi uno scostamento di 0 diventa 0 e non 0px.

Con opacità al 100 % il colore esce in esadecimale minuscolo, per esempio #111827. Sotto il 100 % esce come rgb(0 0 0 / 15%). I livelli nascosti non compaiono. Se sono tutti nascosti, il risultato è box-shadow: none;. Prefissi come -webkit- non vengono aggiunti.

Limiti dei controlli e sette preset

Scostamento ed espansione vanno da -100 a 100 px, la sfocatura da 0 a 200 px, l’opacità da 0 a 100 % e il raggio da 0 a 100 px. I valori sono interi e un numero fuori intervallo viene portato al massimo quando lasci il campo. Il tetto è sei livelli e l’ultimo livello rimasto non si può eliminare.

I colori vanno scritti in esadecimale, con 3 o 6 cifre. Un nome come red o un valore hsl() viene rifiutato con un avviso e il campo torna all’ultimo colore valido. L’anteprima è un quadrato fisso da 150 px e l’area taglia le ombre molto grandi al bordo.

I preset sono «Morbida», «A livelli», «Offset netto», «Interna (inset)», «Alone», «Neumorfismo» e «Neumorfismo premuto». Ognuno imposta anche i colori e il raggio.

Dove restano i tuoi valori

I valori diventano CSS con JavaScript, nella pagina stessa. Premere un pulsante non invia richieste, come mostra la scheda Rete del browser. I pulsanti di copia scrivono negli appunti. Lo strumento non salva nulla: dopo un ricaricamento torna il preset «A livelli».

Domande frequenti (FAQ)