Générateur d'ombre de boîte
Outil visuel pour créer et copier le code CSS box-shadow.
Environnement
Sortie CSS
border-radius: 24px; background: #e0e0e0; box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25);
Couche 1
Outils recommandés
Utilitaires sélectionnés qui pourraient vous être utiles
Concevoir des ombres CSS (box-shadow) visuellement
Aperçu
Un générateur de box-shadow vous laisse créer la propriété CSS box-shadow en glissant des curseurs plutôt qu'en devinant des nombres. Les ombres apportent profondeur et hiérarchie aux boutons, cartes et modales, mais la syntaxe — décalages, flou, étalement, couleur et inset — est pénible à écrire à la main. Cet outil affiche un aperçu en direct pendant que vous ajustez chaque valeur et vous donne le CSS exact à copier, le tout dans votre navigateur.
Comment utiliser (étape par étape)
- 1
Ajustez les curseurs
Réglez le décalage horizontal et vertical, le flou, l'étalement et la couleur tout en regardant l'aperçu en direct.
- 2
Empilez des ombres si besoin
Ajoutez plusieurs couches d'ombre pour la profondeur, ou activez inset pour une ombre intérieure.
- 3
Copiez le CSS
Récupérez la valeur box-shadow générée et collez-la dans votre feuille de style ou composant.
Comment ça marche
La propriété box-shadow prend des décalages horizontal et vertical, un rayon de flou, un étalement facultatif et une couleur (souvent avec transparence). Vous déplacez des curseurs pour chacun et l'aperçu se met à jour aussitôt, vous voyez donc exactement comment l'ombre tombe. L'outil écrit la déclaration box-shadow correspondante, y compris plusieurs ombres empilées si vous en ajoutez, prête à coller dans votre feuille de style.
Quand l'utiliser
Ajouter une ombre subtile pour détacher une carte ou un bouton de la page. Reproduire l'ombre d'une maquette sans deviner les valeurs. Construire une ombre réaliste et en couches avec plusieurs ombres empilées. Créer une ombre inset pour des éléments d'UI enfoncés. Peaufiner la douceur et la couleur de l'ombre pour thèmes sombres ou clairs. Apprendre comment chaque valeur de box-shadow affecte le résultat.
Questions Fréquentes
Dans l'ordre : décalage horizontal, décalage vertical, rayon de flou et étalement. Les décalages déplacent l'ombre, le flou adoucit son bord, l'étalement l'agrandit ou la réduit. Une couleur suit, souvent rgba() à faible opacité pour la subtilité.
Notes Importantes
Des box-shadows lourdes ou nombreuses peuvent nuire aux performances de rendu, surtout animées. Gardez les ombres subtiles et limitez les couches empilées sur les éléments qui bougent ou se mettent à jour souvent.