Générateur CSS box-shadow
Générateur CSS box-shadow avec réglages de décalage, flou, étalement, couleur et inset, et aperçu en direct de l'ombre. Copiez le code box-shadow prêt à l'emploi, gratuit dans le navigateur.
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Ombre portée
Intégrer
Dernière mise à jour : 2026 · Outil en ligne gratuit
Qu'est-ce que Générateur CSS box-shadow ?
Générateur CSS box-shadow avec réglages de décalage, flou, étalement, couleur et inset, et aperçu en direct de l'ombre. Copiez le code box-shadow prêt à l'emploi, gratuit dans le navigateur.
Comment utiliser
- 1Sélectionner le préréglage— Commencez rapidement avec un bouton de préréglage.
- 2Ajuster les curseurs— Ajustez l'ombre avec les curseurs de décalage X/Y, de flou et de propagation.
- 3Aperçu— Vérifiez le résultat en temps réel dans l'aperçu ci-dessus.
- 4Copier le CSS— Utilisez le bouton de copie pour obtenir le CSS box-shadow.
Outils associés
Générateur de dégradé CSSGénérateur visuel de dégradés CSS linéaires, radiaux et coniques : ajoutez des points de couleur, ajustez l'angle et copiez le CSS. Parfait pour arrière-plans et boutons, gratuit dans le navigateur.
Générateur CSS border-radiusGénérateur CSS border-radius avec huit poignées d'angle indépendantes, des curseurs et un aperçu en direct de la forme arrondie. Copiez le code border-radius prêt à l'emploi, gratuit dans le navigateur.
Générateur CSS FlexboxPlayground CSS Flexbox avec éditeur visuel pour justify-content, align-items, flex-direction et wrap, et aperçu de mise en page en direct. Générez le CSS Flexbox prêt à copier, gratuitement.
Convertisseur de couleursConvertisseur de couleurs entre codes HEX, RGB, HSL et OKLCH, avec le rapport de contraste WCAG de deux couleurs. Vérifiez l'accessibilité en choisissant votre palette, gratuit dans le navigateur.
Questions fréquentes
Oui, utilisez le bouton 'Ajouter une ombre' pour superposer plusieurs ombres.
Oui, activez la case à cocher Inset sur chaque ombre pour créer une ombre intérieure.
Cinq préréglages sont fournis : Subtle, Medium, Large, Inset et Double.
Oui, vous pouvez saisir directement rgba(0,0,0,0.15) dans le champ de couleur.
Non. Tous les calculs se font dans le navigateur.