Générateur de box-shadow CSS
Créez un box-shadow CSS visuellement : plusieurs couches, décalages, flou, étendue, inset et opacité RGBA, aperçu en direct et code propre à copier.
Préréglages
Calques
Réglages de l’aperçu
Aperçu
box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.25);
Outils Connexes
Voir ToutQu'est-ce que Générateur de box-shadow CSS ?
Un éditeur visuel pour la propriété CSS box-shadow. Vous pouvez empiler plusieurs couches d'ombre, donner à chacune son propre décalage, flou, étendue, couleur, opacité et indicateur inset, et voir le résultat sur une boîte d'exemple pendant que l'outil écrit le CSS correspondant.
Comment utiliser Générateur de box-shadow CSS
- Choisissez un préréglage (Douce, Superposée, Nette, Halo, Intérieure, Anneau) ou partez de l'ombre par défaut.
- Sélectionnez un calque et ajustez Décalage horizontal, Décalage vertical, Flou, Étendue, Couleur de l'ombre et Opacité ; cochez Intérieure (inset) pour une ombre intérieure.
- Utilisez Ajouter un calque / Supprimer le calque pour construire des ombres multicouches ; les calques sont listés dans l'ordre de dessin.
- Modifiez le fond, la couleur de l'élément et le rayon dans Réglages de l'aperçu pour juger l'ombre en contexte.
- Copiez le code CSS généré.
Exemple
One layer: x 10px, y -5px, blur 20px, spread 3px, color #3b82f6, opacity 1, Inset on
box-shadow: inset 10px -5px 20px 3px #3b82f6;
Quand utiliser Générateur de box-shadow CSS
Utilisez-le pour concevoir l'élévation de cartes, des anneaux de focus, des halos ou des ombres intérieures sur n'importe quel élément HTML. Pour des ombres sur du texte, utilisez le générateur de text-shadow ; pour des ombres qui suivent la forme d'un PNG transparent ou d'un élément découpé, utilisez plutôt filter: drop-shadow() (générateur de filtres CSS), car box-shadow suit toujours la boîte de bordure de l'élément.
Comment fonctionne Générateur de box-shadow CSS
Chaque calque devient une valeur box-shadow dans l'ordre [inset] x y flou étendue couleur. Les longueurs sont écrites en px (zéro sous la forme 0 sans unité). Le curseur d'opacité est multiplié par l'alpha propre à la couleur : les couleurs totalement opaques sont écrites en hexadécimal, les translucides en rgba(r, g, b, a). Plusieurs calques sont joints par des virgules, un par ligne ; le premier calque est dessiné au-dessus. Le flou ne peut pas être négatif, l'étendue le peut.
Cas d'utilisation courants
- Élévation en couches de style Material pour cartes et fenêtres modales
- Anneaux de focus accessibles avec une ombre à étendue seule (0 0 0 3px)
- Ombres intérieures pour boutons enfoncés et champs de saisie
- Halos colorés autour des boutons d'appel à l'action
- Ombres décalées nettes pour des designs néo-brutalistes
Questions Fréquentes
Dans quel ordre plusieurs ombres sont-elles dessinées ?
La première ombre de la liste est dessinée au-dessus et la dernière en dessous. L'outil écrit les calques dans l'ordre affiché dans le panneau Calques.
Quelle différence entre flou et étendue ?
Le flou adoucit le bord de l'ombre (il ne peut pas être négatif). L'étendue agrandit ou réduit l'ombre avant le flou ; une étendue négative rend l'ombre plus petite que l'élément.
Ai-je encore besoin de -webkit-box-shadow ?
Non. box-shadow sans préfixe est pris en charge par tous les navigateurs depuis plus de dix ans : l'outil ne produit que la propriété standard.
Pourquoi l'ombre n'apparaît-elle pas autour de mon image transparente ?
box-shadow suit la boîte rectangulaire de l'élément (border-radius compris), pas les pixels visibles. Utilisez filter: drop-shadow() pour cela.