Générateur de box-shadow CSS

Créer du CSS box-shadow avec aperçu en direct.

Développeur

Ajustez le décalage horizontal et vertical, le flou, l'étalement et la couleur pour construire un box-shadow. L'aperçu se met à jour en direct. Copiez le CSS. S'exécute dans votre navigateur.

box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);

À propos du Générateur de box-shadow CSS

Box-shadow ajoute une ombre derrière un élément. Cet outil permet de définir le décalage horizontal et vertical, le rayon de flou, l'étalement et la couleur (avec inset optionnel). L'aperçu et le CSS se mettent à jour lorsque vous modifiez les valeurs. Copiez le résultat dans votre feuille de style.

Comment utiliser

  1. Ajustez le décalage, le flou, l'étalement et la couleur. Cochez Inset pour une ombre intérieure.
  2. Copiez le CSS généré et collez-le dans votre projet.

Fonctionnalités principales

  • Curseurs interactifs pour le décalage, le flou, l'étalement et la couleur avec aperçu en temps réel
  • Bascule inset pour les effets d'ombre intérieure (boutons enfoncés, éléments en creux)
  • Copie CSS en un clic — prêt à coller dans n'importe quelle feuille de style
  • Boîte d'aperçu en direct montrant exactement le rendu de l'ombre
  • 100 % basé sur le navigateur — aucune donnée ne quitte votre appareil
  • Fonctionne en complément du Générateur de dégradé CSS pour une création CSS visuelle complète

Quand utiliser cet outil

  • Ajout d'élévation et de profondeur aux cartes, boutons et modales de votre interface
  • Création d'effets d'ombre material design ou néomorphisme
  • Prototypage de styles d'ombre avant de les intégrer au code
  • Apprentissage de l'effet des paramètres de la propriété CSS box-shadow sur l'apparence
  • Génération rapide de CSS sans ouvrir les outils de développement ou une application de design

Détails techniques

Le CSS généré suit la syntaxe standard de box-shadow : [inset] offset-x offset-y blur spread color. Les valeurs de décalage peuvent être négatives (l'ombre se déplace à gauche ou vers le haut). Le rayon de flou doit être non négatif ; des valeurs plus élevées produisent des ombres plus douces. L'étalement agrandit (positif) ou réduit (négatif) l'ombre par rapport à la taille de l'élément. La couleur peut inclure une transparence alpha pour des effets subtils (ex. rgba(0,0,0,0.2)). L'outil produit du CSS standard supporté par tous les navigateurs modernes sans préfixes vendeur.

Conclusion

Le Générateur de box-shadow CSS simplifie le processus de création d'ombres parfaites avec une interface visuelle et interactive. Obtenez du CSS prêt pour la production en quelques secondes sans tâtonnement — le tout s'exécutant en toute confidentialité dans votre navigateur.

Questions fréquentes

Qu'est-ce que inset ?
Inset dessine l'ombre à l'intérieur de l'élément au lieu de l'extérieur. Utile pour des effets enfoncés ou en creux.
Mon entrée est-elle envoyée à un serveur ?
Non. Le CSS est construit dans votre navigateur. Rien n'est envoyé.
Puis-je utiliser plusieurs ombres ?
Cet outil génère une seule ombre. Pour plusieurs ombres, copiez la sortie et ajoutez d'autres valeurs séparées par des virgules à box-shadow.
Ai-je besoin de préfixes vendeur ?
Non. La propriété box-shadow est supportée par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) sans préfixes vendeur. Seuls les très anciens navigateurs (IE8 et en dessous) ne la prennent pas en charge.