Générateur Box-shadow

multi-couches · inset · variable CSS

Le générateur Box-shadow permet de composer des ombres multi-couches, avec inset, contrôle du décalage, du flou, du spread, de la couleur et de l’opacité. Aperçu en direct, préréglages et copie en box-shadow ou en propriété CSS personnalisée (--box-shadow).

Calques d’ombre
Élément
Rayon des bords 12px
Largeur 200px
Hauteur 120px
Préréglages d’ombre
Sortie CSS 

                                    

                                

                            

                        

                    


                    

                        
Conseils pour les ombres CSS

                        
  • Plusieurs calques : superposez des ombres légères plutôt qu’un seul flou très marqué.
  • Inset : idéal pour les états « enfoncés », les creux et la profondeur intérieure ; complétez avec des ombres externes pour la hiérarchie.
  • Custom property : enregistrez la valeur dans --box-shadow et réutilisez-la partout depuis un seul jeton.
  • Contraste de fond : utilisez les pastels d’aperçu pour valider le rendu sur fond clair, foncé ou teinté.