Qu'est-ce qu'un générateur d'ombre de boîte ?
Un générateur d'ombre de boîte CSS vous aide à créer des effets de profondeur visuelle pour les éléments HTML. Il vous permet de configurer les décalages horizontaux et verticaux, le rayon de flou, le rayon d'étendue et la couleur, puis génère le code de la propriété CSS box-shadow.
Comment utiliser ce générateur d'ombre de boîte
- Entrez les valeurs de décalage X, décalage Y, flou, étendue (en pixels) et couleur d'ombre (par ex., rgba(0,0,0,0.3)). Le code CSS se met à jour automatiquement au fur et à mesure de la saisie.
- Cliquez sur « Générer » pour charger une présélection d'ombre aléatoire pour une expérimentation rapide.
- Copiez la propriété CSS box-shadow générée pour l'utiliser dans votre feuille de style.
Concepts clés
La syntaxe CSS box-shadow est : box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Un X positif se déplace vers la droite, un Y positif vers le bas. Le rayon de flou crée de la douceur ; le rayon d'étendue agrandit ou rétrécit l'ombre. Plusieurs ombres peuvent être superposées (séparées par des virgules) pour créer une profondeur réaliste. Le mot-clé inset crée des ombres internes.
Questions fréquemment posées
Comment créer une ombre réaliste ?
Utilisez des décalages subtils (2-8px), un flou modéré (10-30px), une étendue négative pour des ombres plus serrées, et du noir semi-transparent (rgba(0,0,0,0.1-0.3)). Superposez plusieurs ombres à des décalages différents pour créer de la profondeur.
Puis-je ajouter plusieurs ombres à un élément ?
Oui. Séparez les valeurs d'ombre multiples par des virgules. La première ombre de la liste apparaît en haut. Cette technique crée des effets d'ombre superposés et réalistes.
L'ombre de boîte affecte-t-elle la mise en page ?
Non. Les ombres de boîte sont purement visuelles et n'affectent pas le modèle de boîte ou la mise en page de l'élément. Elles peuvent déborder dans les éléments adjacents, alors utilisez des ajustements de débordement ou de marge si nécessaire.