Generateur de Box Shadow CSS

Ce que fait le Generateur de Box Shadow

Cet outil vous aide a construire une box-shadow CSS sans memoriser l’ordre des valeurs ni deviner les chiffres. Vous deplacez quelques curseurs, choisissez une couleur, et une boite d’apercu en direct montre exactement le rendu de l’ombre pendant que le CSS correspondant se met a jour a cote. Quand le rendu est bon, vous copiez la regle et la placez dans votre feuille de style. C’est utile pour les developpeurs front-end, les designers, les etudiants qui apprennent le CSS et toute personne souhaitant une ombre propre pour une carte, un bouton ou un panneau sans tatonner dans les outils de developpement du navigateur.

Comment l’utiliser

1. Faites glisser le curseur de decalage horizontal pour deplacer l’ombre vers la gauche ou la droite.
2. Faites glisser le curseur de decalage vertical pour deplacer l’ombre vers le haut ou le bas.
3. Reglez le curseur de flou selon que vous voulez un bord doux ou net.
4. Reglez le curseur d’etalement pour agrandir ou reduire la taille de l’ombre.
5. Ajustez le curseur d’opacite pour controler l’intensite de l’ombre.
6. Choisissez la couleur de l’ombre avec le selecteur de couleur.
7. Activez inset si vous voulez l’ombre a l’interieur de l’element plutot que derriere.
8. Observez l’apercu et le CSS se mettre a jour en direct, puis copiez la regle box-shadow generee.

Un exemple rapide

Pour une ombre douce et moderne, gardez le decalage horizontal proche de zero, mettez un petit decalage vertical positif, augmentez bien le flou, laissez l’etalement a zero et baissez l’opacite pour que l’ombre reste subtile. Cela donne le doux effet de carte surelevee que l’on voit sur la plupart des tableaux de bord. A partir de la, vous pouvez ajuster un seul curseur pour affiner le rendu au lieu de reecrire toute la valeur a la main.

Tout fonctionne dans votre navigateur, donc rien n’est telecharge. L’outil est prive, gratuit et ne necessite aucune inscription.