Développeur / CSS
Générateur de box-shadow CSS
Créez visuellement un box-shadow CSS : décalage, flou, étalement, couleur, opacité, inset et plusieurs calques, avec préréglages et aperçu en direct, puis copiez le CSS.
Générateur de box-shadow CSS: Chaque calque devient une ombre dans la liste box-shadow : décalage horizontal et vertical, rayon de flou, étalement et couleur écrite avec rgb(), suivie de l’opacité après une barre oblique. Les calques sont dessinés en commençant par le premier, au premier plan. Vous pouvez modifier le rayon des angles, la couleur et l’arrière-plan de la boîte d’aperçu pour l’adapter à votre design. L’ombre suit les angles comme elle le fera sur votre page. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.
- Catégorie
- Outils développeur
- Exécutions
- Dans votre navigateur
- Coût
- Gratuit · sans inscription
- Disponibilité
- Prêt à l'emploi
Fonctionne entièrement dans votre navigateur
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
Les valeurs correspondent au décalage vers la droite, au décalage vers le bas, au flou, à l’étendue et à la couleur. Plusieurs calques fins paraissent plus naturels qu’une seule ombre épaisse ; les calques suivants sont dessinés sous les précédents.
Préréglages
Élévation
Les systèmes de design utilisent les ombres pour montrer à quelle hauteur un élément semble flotter au-dessus de la page : une carte au repos possède une ombre petite et nette, tandis qu’un menu ou une boîte de dialogue en possède une plus grande et plus douce. Prévoir quelques niveaux fixes, plutôt qu’une ombre différente partout, donne une impression de cohérence à l’interface.
Les ombres se voient à peine sur un arrière-plan sombre ; dans ce cas, une surface plus claire ou une fine bordure produit le même effet. Associez les ombres à un dégradé CSS pour les boutons et les cartes.
Ombres et performances
Un flou important demande plus de ressources de rendu qu’un petit flou, ce qui compte lorsque de nombreux éléments ombrés défilent ou s’animent en même temps. Pour animer une ombre au survol, il est plus fluide de faire apparaître progressivement une seconde ombre plus marquée sur un pseudo-élément avec une opacité, plutôt que de modifier box-shadow à chaque image.
Comment l'utiliser
- Partez d’un préréglage ou ajustez le décalage, le flou, l’étalement et l’opacité du premier calque.
- Ajoutez d’autres calques pour une ombre plus douce et réaliste, ou cochez inset pour placer l’ombre à l’intérieur de la boîte.
- Copiez la déclaration box-shadow.
Confidentialité et limitations
Tout s’exécute dans votre navigateur ; votre dernière ombre est conservée uniquement dans ce navigateur.
Outils associés
Questions fréquentes
Quels sont les quatre nombres de box-shadow ?
Il s’agit du décalage horizontal (une valeur positive déplace l’ombre vers la droite), du décalage vertical (une valeur positive la déplace vers le bas), du rayon de flou (une valeur plus grande produit une ombre plus douce et ce rayon ne peut pas être négatif) et de l’étalement (une valeur positive agrandit l’ombre par rapport à la boîte, une valeur négative la réduit). La couleur vient en dernier.
Comment rendre une ombre naturelle ?
Utilisez une faible opacité, décalez l’ombre vers le bas comme si la lumière venait d’en haut et combinez au moins deux calques : un petit calque plus net près de la boîte et un autre, plus grand et plus doux, plus éloigné. Un étalement légèrement négatif empêche un flou important de dépasser sur les côtés.
À quoi sert inset ?
Cette valeur dessine l’ombre à l’intérieur de la boîte plutôt qu’à l’extérieur. La boîte semble ainsi enfoncée, ce qui convient aux champs de saisie et aux boutons enfoncés.
Pourquoi mon ombre n’apparaît-elle pas sur une image ?
box-shadow est dessiné autour de la boîte de l’élément, et non autour de la forme de l’image qu’elle contient. Pour créer le contour d’un PNG transparent, utilisez plutôt le filtre CSS drop-shadow().
Outil gratuit · dans votre navigateur exécutions · aucun compte requis