Passer au contenu principal

Générateur d'Ombres CSS

Outil gratuit en ligne pour créer visuellement CSS box-shadow et text-shadow et copier le code.

Box Shadow

Type d'ombre

Couches d'ombre

Couche 1
10%

Code CSS

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

Ombres prédéfinies

Fonctionnalités Principales​

  • 2 Types: Box Shadow, Text Shadow
  • Aperçu en Temps Réel: Voir les changements instantanément
  • Plusieurs Couches: Ajouter jusqu'à 5 couches d'ombre
  • Contrôle Fin: Décalage X/Y, flou, étendue, couleur, opacité
  • Support Inset: Effet d'ombre intérieure
  • Préréglages: 6 ombres prédéfinies
  • Copie en Un Clic: Copier le code CSS instantanément

Types d'Ombres​

1. Box Shadow​

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

Ajoute des effets d'ombre à l'extérieur ou à l'intérieur des éléments.

Cas d'Usage:

  • Ombres de cartes
  • Profondeur de boutons
  • Arrière-plans de modales
  • Effets de bordure d'image

2. Text Shadow​

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

Ajoute des effets d'ombre au texte.

Cas d'Usage:

  • Titres d'en-tête
  • Texte de logo
  • Effets néon
  • Texte 3D

Compatibilité des Navigateurs​

Box Shadow​

  • ✅ Chrome 10+
  • ✅ Firefox 4+
  • ✅ Safari 5.1+
  • ✅ Edge 12+
  • ✅ IE 9+
  • ✅ Tous les navigateurs mobiles

Text Shadow​

  • ✅ Chrome 4+
  • ✅ Firefox 3.5+
  • ✅ Safari 4+
  • ✅ Edge 12+
  • ✅ IE 10+
  • ✅ Tous les navigateurs mobiles

Outils Associés​