Générateur de box-shadow CSS
Construisez une box-shadow en déplaçant des curseurs et en voyant le résultat sur une carte. Empilez jusqu'à six couches pour des ombres plus douces et plus réalistes, utilisez inset pour les effets enfoncés et partez de modèles comme doux, flottant, lueur ou neumorphisme. Copiez le CSS en un clic.
Comment l'utiliser
- Choisissez un modèle ou réglez le décalage, le flou, l'étendue, la couleur et l'opacité de l'ombre.
- Ajoutez des couches avec + et sélectionnez chacune pour la modifier ; changez l'arrière-plan, la couleur de la boîte et le rayon des coins pour l'accorder à votre design.
- Copiez le CSS et collez-le dans la règle de l'élément.
Questions fréquentes
À quoi servent le flou et l'étendue ?
Le flou adoucit le bord de l'ombre ; à zéro, le bord est net. L'étendue agrandit l'ombre dans toutes les directions avant le flou, et une étendue négative la réduit, ce qui permet à une grande ombre floue de rester sous l'élément.
Pourquoi utiliser plusieurs couches d'ombre ?
Les ombres réelles sont plus sombres près de l'objet et s'estompent plus loin. Combiner une petite ombre nette avec une plus grande et plus douce imite cela et paraît plus naturel qu'une ombre unique. La première couche de la liste est dessinée au-dessus.
Est-ce que box-shadow ralentit une page ?
Pas en usage normal. Des flous très grands sur beaucoup d'éléments, ou l'animation de l'ombre elle-même, peuvent coûter en performances sur les téléphones lents ; pour animer, changez plutôt l'opacité d'un pseudo-élément qui porte l'ombre.
🏷️ Générateur de balises meta
🖼️ Générateur Open Graph
🔗 Générateur de liens UTM
🌈 Générateur de dégradé CSS