Générateur de box-shadow CSS
Déplacez les curseurs et copiez le CSS.
- Fonctionne dans votre navigateur — votre texte n'est jamais envoyé nulle part
- Sans inscription, sans quota, gratuit et utilisable aussi souvent que vous le souhaitez
Comment ça marche
Box-shadow prend quatre nombres et une couleur dans un ordre précis, et la différence entre une ombre qui évoque la profondeur et une qui évoque un autocollant tient entièrement à ces nombres. Voir le résultat changer pendant que vous faites glisser est bien plus rapide que de deviner.
Ce que signifient les quatre nombres
Dans l'ordre§: décalage horizontal, décalage vertical, rayon de flou et étendue. Les décalages déplacent l'ombre§; le flou adoucit son bord§; l'étendue l'agrandit ou la réduit avant le flou. Une étendue négative resserre l'ombre, ce qui permet d'avoir une ombre serrée sous une carte sans qu'elle déborde sur les côtés.
La rendre réaliste
La lumière vient généralement d'en haut, donc un petit décalage vertical positif sans décalage horizontal paraît naturel. Les ombres grandes et très transparentes évoquent une profondeur douce§; les petites, sombres et nettes évoquent un autocollant découpé. Les objets réels projettent des ombres d'autant plus floues qu'ils sont loin de la surface§: un flou plus grand suggère un élément plus haut.
Ombres internes
Une ombre interne est dessinée à l'intérieur de l'élément au lieu de l'extérieur, c'est ainsi que l'on fabrique les boutons enfoncés, les champs de saisie et les panneaux en creux. Les quatre mêmes nombres s'appliquent, simplement orientés vers l'intérieur.
Plusieurs ombres à la fois
CSS accepte une liste séparée par des virgules, et superposer deux ombres, l'une serrée et sombre, l'autre large et pâle, donne un résultat nettement meilleur qu'une seule. Ce générateur en produit une§; collez-en deux ensemble vous-même pour l'effet en couches.
Générateur de box-shadow CSS : questions
Dans quel ordre sont les valeurs§?
Décalage horizontal, décalage vertical, flou, étendue, puis couleur.
Que fait une étendue négative§?
Elle réduit l'ombre avant le flou, ce qui la garde serrée sous un élément au lieu de déborder sur les côtés.
Qu'est-ce qu'une ombre interne§?
Une ombre dessinée à l'intérieur de l'élément plutôt qu'à l'extérieur, utilisée pour les boutons enfoncés et les champs de saisie.
Puis-je faire une ombre en plusieurs couches§?
Pas directement. CSS accepte une liste séparée par des virgules, donc générez-en deux et collez-les ensemble.