Générateur de box-shadow CSS
Superposez quelques couches légères pour des ombres naturelles, puis copiez le CSS.
Scellé sur cet appareil
Fonctionne dans votre navigateur. Rien n’est envoyé.
Scellé
Aperçu
Couches d’ombre
Aucune ombre pour l’instant. Ajoutez une couche pour commencer.
Code CSS
Comment ça marche
-
Partez d’un préréglage
Choisissez une ombre douce, en couches, flottante, nette ou intérieure comme point de départ.
-
Ajustez les couches
Réglez le décalage, le flou, l’étendue, la couleur et l’opacité de chaque couche, et ajoutez-en ou retirez-en. L’aperçu se met à jour au fur et à mesure.
-
Copiez le CSS
Copiez la déclaration box-shadow et collez-la dans votre feuille de style.
Questions fréquentes
À quoi servent le flou et l’étendue ?
Le flou adoucit le bord de l’ombre : plus la valeur est élevée, plus elle est diffuse. L’étendue agrandit ou réduit l’ombre avant l’application du flou. Une étendue négative associée à un grand flou donne l’effet doux et surélevé courant dans les interfaces modernes.
Pourquoi utiliser plusieurs couches d’ombre ?
Une vraie ombre a un cœur sombre et resserré près de l’objet, et un halo doux et large plus loin. Superposer une petite couche nette à une ou deux couches plus grandes et plus claires reproduit cet effet, bien plus naturel qu’une ombre unique.
Qu’est-ce qu’une ombre intérieure (inset) ?
Une ombre inset est dessinée à l’intérieur de l’élément plutôt qu’à l’extérieur. Elle donne l’impression d’une surface enfoncée, idéale pour les champs de saisie ou les boutons pressés.
L’ombre fonctionnera-t-elle dans tous les navigateurs ?
Oui. box-shadow, les couches multiples et la syntaxe de couleur rgb() utilisée dans le code sont prises en charge par tous les navigateurs actuels.
Une box-shadow ralentit-elle ma page ?
Les ombres statiques sont peu coûteuses à dessiner. De très grands flous sur de nombreux éléments, ou l’animation de l’ombre elle-même, peuvent coûter davantage. Pour animer une ombre en douceur, faites plutôt varier l’opacité d’un pseudo-élément qui porte l’ombre.