Générer un box-shadow CSS précis
Le générateur de box-shadow CSS sert à construire une ombre visuelle sans écrire la propriété à la main. L'outil affiche une boîte de prévisualisation, une zone de code et une liste de calques réglables. Chaque calque possède un décalage horizontal, un décalage vertical, un flou, une propagation, une couleur, une opacité et une option inset. Le résultat final est assemblé sous la forme attendue par CSS, par exemple 4px 4px 8px 0 rgba(0,0,0,0.25), et plusieurs ombres sont séparées par des virgules.
Comprendre les paramètres de l'ombre
Le décalage X déplace l'ombre vers la droite ou vers la gauche, le décalage Y la place au-dessous ou au-dessus de l'élément, le flou adoucit les bords et la propagation agrandit ou réduit la zone de l'ombre. La couleur est saisie en HEX puis convertie en valeurs RGB, tandis que l'opacité est transformée en alpha décimal dans rgba(). Lorsque l'option inset est cochée, l'ombre passe à l'intérieur de l'élément, ce qui permet de simuler un champ enfoncé, une carte pressée ou un effet de profondeur discret.
Calques, presets et prévisualisation
Le fonctionnement réel de la page repose sur une liste de calques. Vous pouvez ajouter une ombre, supprimer un calque, modifier un curseur et voir immédiatement la boîte de prévisualisation changer. Les presets appliquent des combinaisons déjà prêtes : subtil, moyen, large, dramatique, inset, coloré, double couche ou glow. Le preset glow, par exemple, superpose deux ombres violettes avec des flous différents pour produire un halo. Le preset double layer combine deux niveaux d'opacité afin de créer une élévation plus naturelle qu'une ombre unique.
Quand utiliser une ombre CSS
Une ombre légère aide à distinguer une carte, un menu ou un bouton de son arrière-plan. Une ombre trop forte peut donner un aspect artificiel et gêner la hiérarchie visuelle. Pour les interfaces professionnelles, commencez avec une opacité faible et un flou modéré, puis augmentez seulement si l'élément doit vraiment paraître flottant. Le code généré peut être copié directement et collé dans une classe CSS, un attribut style, une variable de thème ou un composant. Si vous travaillez avec un design system, conservez quelques niveaux d'ombre standard au lieu de créer une valeur différente pour chaque carte.
Lire le code généré
Lorsque plusieurs calques sont présents, l'ordre est conservé dans la propriété finale. Cela permet de combiner une ombre courte et dense avec une ombre plus large et transparente. Si le fond de prévisualisation est modifié, l'outil aide aussi à vérifier que l'ombre reste visible sur une surface claire, foncée ou colorée.
Commentaires