Générateur d'ombres CSS (box-shadow)
Réglez une ombre avec des curseurs et un aperçu en direct, puis copiez le CSS. L'option superposée ajoute une ombre de contact discrète pour un rendu plus naturel.
Aucune donnée requise
Loading…
Mode d'emploi
- Ajustez décalage, flou, étendue et opacité.
- Choisissez la couleur.
- Activez l'ombre intérieure ou superposée.
- Copiez le CSS.
Comment ça marche
box-shadow accepte un décalage horizontal et vertical, un rayon de flou, une étendue et une couleur. Une étendue négative réduit l'ombre et évite un « halo » lourd. Superposer une ombre serrée et légère sous une ombre douce imite l'éclairage réel.
Exemples
- Carte
- 0px 12px 32px -8px rgba(15, 23, 42, 0.25)
Utilisations courantes
- Cartes, fenêtres et menus
- Boutons et survols
- Design systems
Confidentialité et sécurité
Cet outil ne demande aucune donnée personnelle ni aucun fichier. Les résultats sont générés sur votre appareil. Comment chaque outil traite les fichiers
Questions fréquentes
Les ombres ralentissent-elles la page ?
Les grandes ombres animées peuvent coûter cher. Animez plutôt l'opacité d'un pseudo-élément.
Pour du texte ?
Utilisez text-shadow, sans valeur d'étendue.
Dernière mise à jour: