Generatore Box-shadow

multi-strato · inset · variabile CSS

Il Generatore Box-shadow ti permette di comporre ombre a più strati, con inset e controlli per offset, blur, spread, colore e opacità. Anteprima in tempo reale, preset pronti e copia del valore come box-shadow o come variabile CSS (--box-shadow).

Strati ombra
Elemento
Border radius 12px
Larghezza 200px
Altezza 120px
Preset ombre
Output CSS 

                                    

                                

                            

                        

                    


                    

                        
Suggerimenti per le ombre CSS

                        
  • Più strati: combina ombre leggere (basso blur, bassa opacità) invece di un solo shadow molto intenso.
  • Inset: utile per stati “premuto”, input o profondità verso l’interno; in coppia con ombre esterne definisce meglio la gerarchia.
  • Custom property: salva il valore in --box-shadow e riusalo su più componenti; aggiorni un solo token per cambiare l’ombra ovunque.
  • Contrasto sullo sfondo: prova i quattro sfondi dell’anteprima per verificare leggibilità e resa su chiaro, scuro o colorato.