🔲

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.

Notez cet outil

✓

ℹ️ À propos de Box Shadow Generator

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