Générateur d'ombre de boîte CSS
Créez visuellement les valeurs de l'ombre de la boîte.
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.
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.
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.