Générateur de box-shadow CSS

Réglez une ombre box-shadow avec aperçu en direct et copiez le CSS.

Décalage X : 0px

Décalage Y : 4px

Flou : 12px

Étalement : 0px

Opacité : 10%

Intérieur

Aperçu

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);

Vous cherchez des dégradés ou du glassmorphism ? Essayez nos outils dédiés : Générateur de Dégradés CSS · Créateur de Glassmorphism

Comment ça marche

Réglez les curseurs de décalage, de flou, d'étalement, de couleur et d'opacité.
Regardez l'aperçu en direct se mettre à jour à chaque valeur.
Activez « Intérieur » pour les ombres intérieures.
Copiez le CSS box-shadow généré.

À quoi ça sert

Régler une box-shadow sans deviner les valeurs.
Retrouver exactement l'élévation et la profondeur d'une maquette.
Construire des ombres douces et superposées pour des cartes et des boutons.

Bon à savoir

L'outil ne génère que des box-shadow : pour les dégradés ou le glassmorphism, utilisez les outils dédiés, Générateur de dégradé CSS et Carte glassmorphism.
L'aperçu montre un seul élément : testez dans votre vraie mise en page pour les empilements et les interactions avec le fond.

Questions fréquentes

Quels effets puis-je générer ?

Des box-shadow (extérieures et intérieures) avec un aperçu en direct, pour régler à l'œil plutôt que par essais successifs. Les dégradés et le glassmorphism ont leurs propres outils sur Sticraft.

Puis-je faire une ombre intérieure ?

Oui : activez l'option Intérieur et l'ombre s'affiche à l'intérieur de l'élément au lieu de derrière lui.

Quelque chose est-il envoyé sur un serveur ?

Non. Le CSS est généré en direct dans votre navigateur.

Outils associés

Visionneuse DXF

Palette de couleurs d'image

Convertisseur de couleur

Vérificateur de contraste

Carte glassmorphism