Générateur de box-shadow CSS
Déplacez les curseurs jusqu'au rendu voulu, puis copiez la ligne box-shadow. L'aperçu montre exactement le résultat.
CSS
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.35);
À propos de cet outil
box-shadow prend quatre longueurs : décalage horizontal, décalage vertical, rayon de flou et étalement. Le flou adoucit le bord, l'étalement agrandit ou réduit l'ombre avant le flou, et un étalement négatif avec un décalage vertical positif donne l'élévation discrète des systèmes de design.
Le mot-clé inset dessine l'ombre à l'intérieur de la boîte plutôt que derrière : c'est ainsi que l'on fait les boutons enfoncés et les creux. La couleur est généralement du noir peu opaque plutôt que du gris, car une ombre translucide garde sa relation avec ce qui se trouve derrière.
Questions fréquentes
- Pourquoi mon ombre paraît-elle grise et plate ?
- Un gris opaque ignore le fond. Utilisez du noir à 20-40 % d'opacité avec un léger étalement négatif.
- Puis-je superposer plusieurs ombres ?
- Oui. Séparez les valeurs par des virgules dans votre feuille de style : générez chaque couche ici puis assemblez-les.
- box-shadow modifie-t-il la mise en page ?
- Non. Elle est peinte hors de la boîte de bordure et ne change ni la taille ni la position, contrairement à une bordure.