Vue d'ensemble
Cet outil construit des valeurs box-shadow que vous pouvez intégrer à votre CSS sans saisir chaque paramètre à la main. Vous gardez le contrôle sur le décalage horizontal et vertical, le rayon de flou, l’étalement, la couleur de l’ombre, l’opacité et le style inset, afin d’obtenir un rendu cohérent avec l’élément conçu. Il est utile quand l’ombre doit paraître réfléchie plutôt qu’improvisée. Vous pouvez l’appliquer aux cartes, menus, boîtes de dialogue, barres fixes, champs de formulaire et conteneurs d’images, et l’aperçu aide à comparer une ombre discrète à une ombre plus présente avant de choisir.
Cas d'usage
- Profondeur pour des cartes produitCréez une ombre douce pour des cartes de catalogue afin de bien les détacher du fond.
- État pressé d’un boutonGénérez une ombre plus serrée, avec moins de flou et un étalement négatif, pour un bouton qui semble cliquable.
- Ombres internes pour champs de saisieConstruisez des effets inset pour les inputs, barres de recherche et panneaux à aspect creusé.
- Panneau flottant pour menus déroulantsRéglez un flou plus large et un décalage modéré pour les infobulles, listes et popovers.
Comment ca marche
- 1
Réglez le décalage horizontal et vertical pour placer l’ombre.
- 2
Ajustez le flou et l’étalement afin de contrôler douceur et taille.
- 3
Choisissez la couleur de l’ombre et son opacité selon le fond.
- 4
Activez inset si vous souhaitez une ombre intérieure.
- 5
Copiez le CSS généré et appliquez-le au sélecteur voulu.
Exemples
Ombre douce neutre
Entree: x: 0, y: 10px, blur: 30px, spread: -8px, color: rgba(15, 23, 42, 0.14)
Sortie: box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.14);
Une ombre légère pour des cartes claires sur fond doux.
Inset pour un champ creusé
Entree: x: 0, y: 2px, blur: 6px, spread: 0, color: rgba(0, 0, 0, 0.18), inset: true
Sortie: box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.18);
Un effet en retrait pour un champ ou un panneau.
Ombre compacte au survol
Entree: x: 0, y: 6px, blur: 16px, spread: -4px, color: rgba(37, 99, 235, 0.22)
Sortie: box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.22);
Une ombre colorée pour des tuiles d’action au survol.
FAQ
Que modifie la valeur spread dans l’ombre ?
Spread modifie la taille de l’ombre avant le flou. Les valeurs négatives la resserrent, les valeurs positives l’agrandissent.
Pourquoi l’ombre paraît-elle trop dure sur fond sombre ?
La couleur est souvent trop opaque ou le flou trop faible. Diminuez l’opacité et augmentez le blur pour adoucir les bords.
Quand utiliser inset plutôt qu’une ombre classique ?
Utilisez inset quand la surface doit paraître enfoncée, par exemple pour des champs de formulaire, des panneaux creusés ou des zones internes discrètes.
Puis-je créer plusieurs couches d’ombre ici ?
L’outil génère une règle à la fois. Si vous avez besoin de plusieurs couches, combinez plusieurs valeurs box-shadow manuellement dans votre CSS.
Pourquoi une grande valeur d’étalement négatif fait-elle disparaître l’ombre ?
Un étalement négatif trop fort peut réduire l’ombre au point de la rendre invisible, surtout avec peu de flou. Réduisez la valeur négative ou augmentez le flou.