Générateur d'ombre de boîte CSS
Créez visuellement les valeurs de l'ombre de la boîte. Définissez le décalage horizontal et vertical en pixels, le rayon de flou (bord adouci), la répartition (agrandir ou réduire l'ombre avant le flou), la couleur, l'opacité et l'encart facultatif pour les ombres intérieures. La boîte de prévisualisation est mise à jour en direct ; copiez la déclaration box-shadow complète dans votre CSS. Comprenez comment chaque paramètre modifie l'élévation et la profondeur sans essais et erreurs dans les outils de développement.
X (px)
Y (px)
Flou (px)
Étalement (px)
Couleur
Opacité (0–1)
CSS
box-shadow: 0px 8px 24px 0px rgba(20, 20, 20, 0.18);
Comment créer une ombre de boîte
1. Définissez le décalage X et Y : un X positif déplace l'ombre vers la droite, un Y positif la déplace vers le bas.
2. Ajustez le flou (douceur) et l'étalement (taille avant flou).
3. Choisissez la couleur et l'opacité de l'ombre.
4. Activez l'encart si l'ombre doit apparaître à l'intérieur de la boîte ; copie CSS.
Recettes d'ombres
Élévation de la carte souple
offsetY 8px, flou 24px, propagation 0, noir à 18% d'opacité — une carte flottante de style matériau : box-shadow : 0 8px 24px rgba(20,20,20,0.18).
Ombre portée nette
flou 0, propagation 0, offsetY 4px — bord dur comme un autocollant légèrement soulevé de la page.
Bouton enfoncé enfoncé
Activer l'encart avec un petit flou : simule un contrôle enfoncé ou encastré à l'intérieur de l'élément.
Quand utiliser cet outil
• Lorsque vous ajustez la profondeur de l'interface utilisateur pour les cartes, les modaux et les boutons.
• Quand vous apprenez en quoi le flou diffère de la propagation.
• Lorsque vous documentez des jetons de conception avec des valeurs d'ombre exactes.
Quand choisir autre chose
• Lorsque vous avez besoin de plusieurs ombres empilées, copiez le premier calque ici, puis ajoutez-en davantage dans CSS.
• Lorsque vous voulez text-shadow — propriété différente avec une syntaxe similaire.
• Lorsque vous avez besoin d'une ombre portée sur des formes PNG irrégulières, filter: drop-shadow() peut mieux fonctionner.
Lire les quatre nombres
box-shadow : 0 8px 24px 0 signifie x=0, y=8px vers le bas, flou=24px, spread=0. Omettez la propagation et la propagation par défaut des navigateurs sur 0. Un grand flou avec un décalage nul crée une lueur ; un grand décalage avec un petit flou crée une lumière directionnelle.
Superposition d'ombres
Ombres multiples séparées par des virgules : box-shadow : 0 1px 2px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.15); La première ombre est peinte en dessous des suivantes. Combinez une ombre sombre et serrée avec une ombre large et claire pour une profondeur réaliste.
Accessibilité et performances
Les ombres épaisses sur de grandes zones animées peuvent coûter du temps de peinture au GPU. Préférez les ombres subtiles pour les interfaces utilisateur riches en données. Assurez-vous que les éléments ciblés restent visibles — ne nombre pas uniquement sur l’ombre pour afficher l’état ; associez-le à une bordure ou à un contour pour les utilisateurs de clavier.
Questions fréquentes
Quelle est la syntaxe box-shadow ?
box-shadow : offset-x offset-y couleur du rayon de flou du rayon de propagation ; Le mot-clé d'encart facultatif crée une ombre intérieure.
Flou ou propagation ?
Le flou adoucit le bord de l'ombre. La propagation agrandit ou contracte la forme de l'ombre avant de la rendre floue : la propagation positive s'agrandit, la négative se rétrécit.
Quelles unités dois-je utiliser ?
Cet outil génère des pixels (px), le choix le plus courant pour les ombres de l'interface utilisateur de l'écran.
A quoi sert l'encart ?
Inset dessine l'ombre à l'intérieur de la zone de bordure de l'élément - utile pour les entrées ou les puits enfoncés.
La couleur de l’ombre peut-elle être semi-transparente ?
Oui. L'opacité est appliquée à la couleur choisie, produisant une sortie RVBA pour des bords lisses sur des arrière-plans variés.
Les valeurs sont-elles envoyées à un serveur ?
Non. Preview et CSS sont locaux.
Est-ce gratuit ?
Oui, aucun nombre n'est nécessaire.