🌫️

Générateur ombre CSS

Construisez visuellement des valeurs CSS box-shadow. Ajustez le décalage, le flou, l’étendue, la couleur et l’opacité avec un aperçu en direct. Empilez plusieurs couches et copiez le CSS final.

Outils de génération Fonctionne localement Aucune donnée envoyée
cssbox-shadowgénérateurdesign
Couches
Décalage X4px
Décalage Y4px
Flou8px
Propagation0px
%
Intérieur

Qu'est-ce que le générateur ombre CSS ?

Le générateur ombre CSS vous permet de créer visuellement des valeurs box-shadow et de copier instantanément le CSS. Ajustez les décalages, le flou, la propagation, la couleur et l'opacité avec un aperçu en direct.

Comment utiliser le générateur ombre CSS

  1. Réglez les curseurs Décalage X/Y, Flou et Propagation.
  2. Choisissez une couleur d'ombre et définissez l'opacité.
  3. Activez Intérieur pour un effet d'ombre interne.
  4. Ajoutez d'autres calques pour des ombres complexes.
  5. Copiez le CSS et collez-le dans votre projet.

Outils associés

🌈
générateur dégradé CSS
Créez des dégradés CSS linéaires et radiaux
🖌️
sélecteur couleur
Sélectionnez et convertissez des couleurs entre formats
🎨
Formateur CSS
Formater et embellir le code CSS
En savoir plus▾
Paramètres de box-shadow
  • Décalage X/Y —décale l’ombre horizontalement et verticalement
  • Flou —degré de douceur/flou du bord de l’ombre
  • Propagation —agrandit ou réduit la taille de l’ombre
  • Intérieur —affiche l’ombre à l’intérieur de l’élément
Questions fréquentes
Puis-je ajouter plusieurs ombres ?

Oui. Cliquez sur « Ajouter une couche » pour empiler plusieurs valeurs box-shadow, séparées par des virgules dans le CSS généré.

Comment utiliser le CSS généré ?

Cliquez sur « Copier le CSS » et collez la propriété box-shadow directement dans votre fichier CSS ou bloc de style.