Générateur d’ombre CSS

Le générateur d’ombre CSS est un outil gratuit qui s’exécute entièrement dans votre navigateur, sans aucun envoi vers un serveur. Régler une ombre box-shadow et copier la propriété obtenue.

Lire les quatre longueurs

La propriété box-shadow attend, dans l’ordre : le décalage horizontal, le décalage vertical, le flou, puis l’étendue. Les deux premiers placent l’ombre, le troisième adoucit son bord, le quatrième la grossit ou la rétrécit avant que le flou ne s’applique.

Une ombre crédible reste discrète

Une ombre lisible imite une lumière venue du haut : décalage horizontal nul, décalage vertical positif, opacité faible. Au-delà de 30 % d’opacité, l’effet devient une tache grise plutôt qu’une ombre. Le noir pur donne un rendu terne ; une teinte sombre empruntée à la couleur dominante de la page paraît nettement plus juste.

Ombre intérieure

Le mot-clé inset retourne l’ombre vers l’intérieur du bloc. C’est ce qui creuse un champ de formulaire, dessine un bouton enfoncé ou marque une zone en retrait.

Ce que cet outil ne fait pas

Cet outil compose une seule ombre à la fois. Les ombres empilées, séparées par des virgules, restent à écrire à la main. Il ne produit pas non plus de text-shadow, dont la syntaxe n’accepte pas l’étendue.

Questions fréquentes

Quelle différence entre box-shadow et filter: drop-shadow ?

box-shadow suit le rectangle du bloc, coins arrondis compris. drop-shadow suit la forme réelle du contenu, transparence comprise : c’est lui qu’il faut pour l’ombre d’un logo PNG détouré.

Comment empiler plusieurs ombres ?

Il suffit de séparer les valeurs par des virgules dans une seule propriété. Générez chaque ombre ici, puis collez-les à la suite : la première déclarée passe devant les autres.

Mes données sont-elles envoyées sur un serveur ?

Non : le texte que vous saisissez ou collez est traité entièrement dans votre navigateur, sur votre appareil. Il n’est jamais transmis à un serveur.

Faut-il créer un compte ou installer quelque chose ?

Non : l’outil fonctionne directement dans cette page, sans inscription ni installation.