Générateur de box-shadow CSS
Générez une ombre portée CSS (box-shadow) avec aperçu en direct et code à copier.
🔒 100 % côté client — aucune donnée envoyée
Générez une ombre portée CSS (box-shadow) avec aperçu en direct et obtenez le code prêt à copier dans votre projet. Réglez le décalage, le flou, l'étalement, la couleur et l'ombre interne pour créer des effets de profondeur soignés. Tout se calcule dans votre navigateur, sans inscription ni envoi de données.
FAQ
Comment fonctionne la propriété box-shadow ?
box-shadow prend un décalage horizontal et vertical, un rayon de flou, un étalement et une couleur, par exemple : box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.2);
Comment créer une ombre interne (inset) ?
Ajoutez le mot-clé inset devant les valeurs de l'ombre pour la projeter à l'intérieur de l'élément plutôt qu'à l'extérieur.
Peut-on appliquer plusieurs ombres à un élément ?
Oui, il suffit de séparer chaque ombre par une virgule dans la même déclaration box-shadow pour les superposer.
Quelle différence entre le flou et l'étalement ?
Le flou adoucit les bords de l'ombre, tandis que l'étalement agrandit ou réduit sa taille avant l'application du flou.