Générateur CSS box-shadow
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.15);Drop Shadow
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 gratuit en ligne avec contrôles pour décalage, flou, étalement, couleur et inset, offrant un aperçu en direct de l'ombre et produisant un code CSS box-shadow prêt à copier.
Comment utiliser
- 1 Sélectionner le préréglage — Commencez rapidement avec un bouton de préréglage.
- 2 Ajuster les curseurs — Ajustez l'ombre avec les curseurs de décalage X/Y, de flou et de propagation.
- 3 Aperçu — Vérifiez le résultat en temps réel dans l'aperçu ci-dessus.
- 4 Copier le CSS — Utilisez le bouton de copie pour obtenir le CSS box-shadow.
Outils associés
Générateur de dégradé CSS Générateur de dégradé CSS visuel gratuit : créez des dégradés linéaires, radiaux et coniques, ajustez les points de couleur et l'angle, puis copiez le code CSS prêt à l'emploi.
Générateur CSS border-radius Générateur CSS border-radius gratuit en ligne avec huit poignées d'angle indépendantes et curseurs, offrant un aperçu en direct de la forme arrondie et produisant un code CSS border-radius prêt à copier.
Générateur CSS Flexbox Terrain de jeu CSS Flexbox gratuit en ligne avec éditeur visuel pour justify-content, align-items, flex-direction et wrap, affichant un aperçu de mise en page en direct et générant du CSS Flexbox prêt à copier.
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.