Générateur Box Shadow
Créez des ombres CSS visuellement avec notre générateur gratuit. Ajustez flou, extension, couleur et décalage. Copiez le code.
Aperçu
Couches ()
Préréglages
Calque
Code CSS
Méthode et limites
Chaque calque écrit X, Y, flou et étalement en pixels, puis RGBA et éventuellement inset. Les calques sont séparés par des virgules ; leur ordre influe sur la superposition.
X, Y et étalement : −50…50 ; flou : 0…100 ; opacité : 0…100 %. HEX accepte #RGB ou #RRGGBB. Un calque incomplet ou invalide efface la sortie combinée.
Copié
Échec de la copie. Sélectionnez le résultat et copiez-le manuellement.
À propos de Générateur Box Shadow
Composez des ombres CSS pour cartes, boutons et conteneurs avec des calques indépendants et six préréglages. Les aperçus arrondi et circulaire permettent de comparer les mêmes réglages.
X=5, Y=5, flou=20, étalement=0, noir à 25 % : box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.25);
Les exemples utilisent les dimensions et couleurs indiquées ; l’apparence dépend aussi de la mise en page et du navigateur.
Cas d'utilisation
Comment utiliser
Choisissez un préréglage ou gardez le calque initial.
Sélectionnez le calque et réglez les décalages X/Y signés.
Réglez le flou et l’étalement, puis une couleur HEX complète.
Ajustez l’opacité ou inset et ajoutez ou retirez des calques.
Comparez les formes et copiez le CSS actuel.
Astuces Pro
- L’étalement agrandit ou contracte l’ombre ; le flou adoucit son bord. X ou Y négatif la déplace à gauche ou en haut. Vérifiez un effet de survol dans votre feuille de style.
- Le générateur calcule le CSS dans la mémoire du navigateur sans enregistrer les ombres. Le thème du site peut utiliser localStorage ; les requêtes de la page sont distinctes.
- Les ombres subtiles sont plus élégantes
- Utilisez plusieurs ombres pour plus de profondeur
- Ajoutez de la transparence avec rgba()
Dépannage
Vérifiez la couleur HEX complète et les limites numériques ; le résultat actuel est indisponible.
X, Y et étalement : −50…50 ; flou : 0…100 ; opacité : 0…100 %. HEX accepte #RGB ou #RRGGBB. Un calque incomplet ou invalide efface la sortie combinée.
Pourquoi 0 % d’opacité masque-t-il une ombre intérieure ?
Inset choisit le placement intérieur ; alpha 0 rend le calque transparent. Les deux réglages restent dans le CSS.
Questions fréquemment posées
Inset choisit le placement intérieur ; alpha 0 rend le calque transparent. Les deux réglages restent dans le CSS.
Ajoutez des calques et sélectionnez chacun pour le modifier. La déclaration copiée les sépare par des virgules ; il reste toujours au moins un calque.
Blur = flou, Spread = taille de l'ombre.
Ajoutez le mot-clé "inset" dans le CSS.