jquery.app
Francais
EnglishDeutschFrancaisEspanol日本語Nederlands

Outils CSS

Gratuit Constructeur box-shadow CSS

Créez visuellement des declarations box-shadow en ajustant decalage, flou, etendue et couleur.

Chargement de l'outil...

Qu'est-ce que Constructeur box-shadow CSS ?

box-shadow est l'une des proprietes CSS les plus couramment utilisees pour ajouter de la profondeur et de l'elevation aux elements, mais sa syntaxe a valeurs multiples peut etre deroutante, surtout lors de la combinaison du decalage, du flou, de l'etalement, de la couleur et du mot-cle inset. Cet outil rend la propriete visuelle en montrant un apercu en direct pendant que vous ajustez chaque valeur, afin que vous puissiez voir exactement comment l'ombre se comporte avant de l'ajouter a votre feuille de style.

Réponse rapide

Generez une declaration box-shadow en ajustant le decalage, le flou, l'etalement, la couleur et inset. L'apercu en direct montre l'ombre sur un div statique pour que vous puissiez ajuster les valeurs avant de les ajouter a votre feuille de style.

Last updated: 2026-06-11

Limites

  • L'apercu est un div statique sans contexte environnant. Une ombre qui semble correcte isolement peut paraitre differente sur un fond de page reel ou pres d'autres elements.
  • L'outil genere une ombre a la fois. Pour des ombres superposees ou multiples, vous devez combiner les valeurs manuellement dans votre feuille de style.
  • La propriete box-shadow cree des ombres qui suivent la boete CSS de l'element, pas la forme visible. Pour les elements non rectangulaires avec des fonds transparents ou des formes CSS clip-path, utilisez le filtre drop-shadow pour une ombre qui suit les contours visibles.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Comment utiliser cet outil

  1. Ajustez le decalage horizontal et vertical pour deplacer la position de l'ombre.
  2. Definissez le rayon de flou et l'etalement pour controler la douceur et la taille.
  3. Choisissez une couleur d'ombre et activez inset si l'ombre doit apparaitre a l'interieur de l'element.
  4. Copiez la declaration CSS generee et collez-la dans votre feuille de style.

A quoi il sert

  • Ajouter une elevation subtile aux cartes, modales et menus deroulants.
  • Creer des effets enfonces inset pour les boutons et champs de formulaire.
  • Construire des ombres superposees en combinant plusieurs valeurs box-shadow pour une profondeur realiste.

Cas d'usage

Exemples concrets

Exemple

Ombre de carte subtile

Un composant de carte necessite une legere box-shadow pour le soulever de la page. Un petit decalage et flou avec un noir de faible opacite cree une ombre propre de style material.

Exemple

Ombre inset de champ de formulaire

Un champ de saisie de texte peut utiliser une ombre inset pour suggerer de la profondeur a l'interieur du champ. L'outil active le mot-cle inset pour que l'ombre s'affiche a l'interieur de la bordure de l'element.

Erreurs frequentes

  • Oublier d'ajouter une valeur de couleur, ce qui peut faire rendre l'ombre en noir ou heriter des valeurs par defaut inattendues du navigateur.
  • Utiliser un rayon de flou trop grand, rendant l'ombre presque invisible sur les petits elements.
  • Ne pas verifier que le mot-cle inset produit le comportement d'ombre interieure attendu sur l'element cible.

Vérification

  1. Collez le CSS genere dans votre page reelle et inspectez l'ombre sur l'element reel avec son fond et son contenu adjacent.
  2. Testez l'ombre a differentes tailles d'element pour confirmer que le flou et l'etalement s'adaptent comme prevu.

FAQ

Questions sur Constructeur box-shadow CSS

Que fait la valeur d'etalement (spread) ?

L'etalement agrandit ou retrecit la taille de l'ombre. Un etalement positif agrandit l'ombre, tandis qu'un etalement negatif la retrecit. Un etalement zero maintient l'ombre a la meme taille que l'element.

Comment ajouter plusieurs ombres ?

Separez chaque declaration d'ombre par une virgule. Le constructeur peut etre utilise une fois par ombre, puis vous combinez les valeurs dans votre feuille de style.

Quand dois-je utiliser le filtre drop-shadow a la place ?

Utilisez le filtre CSS drop-shadow lorsque vous avez besoin d'une ombre qui suit la forme exacte d'un element avec un fond transparent ou des coins masques. box-shadow suit toujours la boete CSS de l'element, tandis que drop-shadow suit le contour pixel rendu.

Outils lies

Autres outils outils css

A essayer aussi

A essayer aussi