Par FreeWebTools Editorial Team Mis à jour le 23 août 2026

🔲

Générateur Box Shadow

Créez des ombres CSS visuellement avec notre générateur gratuit. Ajustez flou, extension, couleur et décalage. Copiez le code.

Aperçu

Couches ()

Préréglages

Layer

Décalage horizontal: px

Décalage vertical: px

Rayon de flou: px

Rayon d'expansion: px

Couleur de l'ombre

Opacité: %

Intérieur

Code CSS

Intégrer cet outil sur votre site

× px

Thème

Couleur

Arrière-plan

Bordure

Couleur de bordure

Rayon de bordure

Afficher branding Autoriser plein écran Mode compact Activer les animations Arrière-plan transparent

👁️ Aperçu

💡 Conseil d'intégration

Copiez le code d'intégration et collez-le dans le HTML de votre site. La version responsive s'adapte automatiquement à toutes les tailles d'écran.

0 avis

Notez cet outil

✓

À propos de Générateur Box Shadow

Créez des ombres CSS personnalisées avec prévisualisation en temps réel.

Cas d'utilisation

Design d'interfaces web

Effets de profondeur

Cartes et boutons stylisés

Effets hover élégants

Prototypage rapide

Comment utiliser

Ajustez les paramètres de l'ombre

Visualisez en temps réel

Choisissez la couleur

Copiez le code CSS

Astuces Pro

Les ombres subtiles sont plus élégantes
Utilisez plusieurs ombres pour plus de profondeur
Ajoutez de la transparence avec rgba()

Questions fréquemment posées

Blur = flou, Spread = taille de l'ombre.

Ajoutez le mot-clé "inset" dans le CSS.

Légèrement. Évitez les ombres excessives sur mobile.

Outils populaires

Plus d'outils à afficher

Explorer tous les outils