Générateur de box-shadow CSS
Générez du CSS box-shadow avec aperçu en direct. Ajustez décalage, flou, expansion, couleur et opacité, puis copiez le code.
Aperçu
Paramètres
Décalage X (px)
Décalage Y (px)
Flou (px)
Expansion (px)
Couleur
Opacité
CSS généré
À propos de cet outil
Outil gratuit en ligne pour générer du CSS box-shadow à l’usage des développeurs front-end. La propriété CSS box-shadow ajoute une ou plusieurs ombres à un élément. Chaque ombre est définie par le décalage horizontal (offset-x), le décalage vertical (offset-y), le flou, l’expansion et la couleur. Le mot-clé optionnel "inset" dessine l’ombre à l’intérieur. Vous pouvez régler tous les paramètres visuellement (sliders, couleur), voir le rendu en direct dans la zone de prévisualisation et copier le CSS généré (ex. box-shadow: 0 8px 24px 0 rgba(0,0,0,0.15);) dans votre feuille de style. Aucune installation ; tout s’exécute dans le navigateur.
Comment utiliser
1. Ajuster les paramètres : utilisez les sliders ou champs numériques pour le décalage X (horizontal), le décalage Y (vertical), le flou et l’expansion. Choisissez la couleur de l’ombre (pipette ou valeur HEX, ex. #000000) et l’opacité (0–1). Cochez "Inset" pour une ombre intérieure.
2. Prévisualisation : la zone d’exemple ci-dessus se met à jour en temps réel. Vérifiez l’effet avant de copier.
3. Copier le code : une fois satisfait, cliquez sur "Copier le code" pour copier le CSS box-shadow dans le presse-papiers, puis collez-le dans votre fichier CSS ou en style inline.