Générateur Box-shadow

La propriété CSS box-shadow est l'une des plus puissantes pour le design d'interfaces : elle permet de créer des ombres douces pour les cartes et modales, l'élévation pour les composants Material/flat et les contours de focus visibles. Sa syntaxe multi-paramètres (offset-x, offset-y, blur, spread, color) demande de la pratique pour calibrer le résultat visuel souhaité.

Ce générateur offre :

• Curseurs interactifs pour offset X/Y, rayon de flou, rayon de propagation et opacité
• Sélecteur de couleur avec support RGBA pour une transparence précise
• Ombres multiples : ajoutez, réordonnez et activez/désactivez chaque couche
• Mode inset pour les ombres intérieures (champs de saisie, éléments en creux)
• Préréglages catégorisés : ombre douce, élévation material, neumorphisme, focus outline
• Sortie en propriété box-shadow directe ou variable CSS custom
• Aperçu sur fond clair, sombre et coloré

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é.