Générateur de box-shadow CSS

Ajustez les paramètres d'une ombre portée CSS et récupérez instantanément la valeur box-shadow correspondante, avec aperçu en direct. Traitement 100% local dans votre navigateur (WebAssembly) — rien n'est envoyé à un serveur.

Exemple :

Comment ça marche

La propriété CSS box-shadow accepte un décalage horizontal, un décalage vertical, un rayon de flou, un rayon d'étalement, une couleur, et un mot-clé optionnel "inset" pour une ombre interne. Cet outil compose ces valeurs en direct pour vous éviter de deviner les bons réglages à la main.

Quelle est la différence entre le flou et l'étalement ?

Le flou adoucit les bords de l'ombre en les rendant progressifs, tandis que l'étalement agrandit ou réduit la taille de l'ombre avant application du flou.

À quoi sert l'option "inset" ?

Elle transforme l'ombre portée en ombre interne, projetée à l'intérieur de l'élément, souvent utilisée pour donner un effet de creux ou de champ de saisie.

Traitement 100% local : le calcul s'effectue entièrement dans votre navigateur via WebAssembly, sans aucun envoi de données à un serveur.