Générateur d'ombre

Empiler plusieurs couches box-shadow ou filter:drop-shadow avec aperçu en direct

Empilez plusieurs couches d'ombre pour créer des effets de profondeur. Utilisez box-shadow pour les éléments solides (prend en charge inset et spread) ou filter:drop-shadow pour les formes transparentes (PNG, SVG). L'aperçu en direct se met à jour au fur et à mesure que vous ajustez chaque couche.

box-shadow

drop-shadow

Couches d'ombre

X

Y

Flou

Étendue

inset

Aperçu

CSS

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

Comment utiliser

Choisissez entre le mode box-shadow et drop-shadow à l'aide du contrôle segmenté.
Ajustez le décalage X, le décalage Y, le flou, la propagation et la couleur de la première couche d'ombre.
Cliquez sur "+ Couche" pour empiler plusieurs ombres et configurer chacune indépendamment.
Aperçu de l'effet combiné sur la boîte d'aperçu d'ombre en direct.
Copiez la déclaration CSS générée de la section de sortie et collez-la dans votre feuille de style.

Exemples

Définir offsetY=4, flou=12, propagation=0, couleur=rgba(0,0,0,0.15) produit une ombre de carte standard : box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15).
Ajouter une deuxième couche avec offsetY=1, flou=3 et couleur=rgba(0,0,0,0.08) crée un effet de profondeur en couches populaire dans l'interface utilisateur de style matériel.

Vérifiez les sorties avant utilisation en production. Aucune garantie — voir Conditions.