Générateur de Box Shadow CSS

Créez des ombres box-shadow en aperçu live : flou, étalement, intérieur.

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

Choisissez un effet : box-shadow, dégradé ou glassmorphisme.
Ajustez les contrôles et regardez l'aperçu en direct se mettre à jour.
Affinez les couleurs, le flou, l'étalement et l'opacité.
Copiez le CSS généré.

À quoi ça sert

Régler une box-shadow sans deviner les valeurs.
Construire un dégradé visuellement et copier le CSS.
Créer un effet de carte en glassmorphisme.

Bon à savoir

Il produit du CSS standard ; certains effets (comme le flou de backdrop-filter) dépendent de la prise en charge du navigateur pour le rendu final.
L'aperçu montre un seul élément — testez dans votre mise en page réelle pour l'empilement et les interactions d'arrière-plan.

Questions fréquentes

Quels effets puis-je générer ?

Box-shadow, dégradés linéaires/radiaux et glassmorphisme — chacun avec un aperçu en direct pour régler à l'œil, sans tâtonner.

Le glassmorphisme fonctionnera-t-il partout ?

Il s'appuie sur backdrop-filter, pris en charge par la plupart des navigateurs modernes ; les plus anciens retombent sur un arrière-plan uni. Testez dans vos navigateurs cibles.

Y a-t-il quelque chose de téléversé ?

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

Outils associés

Visionneuse DXF

Palette de Couleurs

Convertisseur de Couleur

Vérificateur de Contraste

Créateur de Cartes Glass