Générateur de box-shadow CSS

Qu'est-ce que Générateur de box-shadow CSS ?

Le générateur de box-shadow CSS est un éditeur visuel gratuit de la propriété box-shadow, conçu pour les développeurs front-end et les designers. Ajoutez une ou plusieurs couches d'ombre et réglez pour chacune offset-x, offset-y, le rayon de flou, le rayon d'étalement, la couleur et l'option inset à l'aide de simples champs numériques et d'un sélecteur de couleur. Une boîte d'aperçu sur un fond en damier affiche le résultat combiné en temps réel, et la déclaration box-shadow complète — séparant chaque couche par des virgules — est générée pour que vous la copiiez. Utilisez-le pour créer des ombres d'élévation douces, du neumorphisme net, des effets de lueur ou de la profondeur en couches façon Material sans mémoriser l'ordre des valeurs.

Comment utiliser Générateur de box-shadow CSS

1. Réglez offset-x et offset-y de la première couche (en px) pour déplacer l'ombre horizontalement et verticalement ; les valeurs négatives la déplacent vers la gauche ou le haut.
2. Ajustez le rayon de flou (la douceur de l'ombre) et le rayon d'étalement (l'ampleur de son agrandissement ou de sa réduction).
3. Choisissez une couleur avec l'échantillon ou saisissez une valeur hexadécimale — un hex à 8 chiffres comme #00000040 définit la transparence de l'ombre.
4. Cochez la case inset pour dessiner l'ombre à l'intérieur de l'élément plutôt qu'à l'extérieur.
5. Cliquez sur Ajouter une couche pour empiler une autre ombre par-dessus, puis réorganisez en modifiant les valeurs ; supprimez n'importe quelle couche avec son bouton corbeille.
6. Observez la mise à jour de l'aperçu, puis copiez le CSS box-shadow généré dans votre feuille de style.

Exemples

x 0, y 4, flou 12, étalement 0, couleur #00000040

box-shadow: 0px 4px 12px 0px #00000040;

Couche 1 : 0 1 2 0 #0000001a · Couche 2 : 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset coché, x 0, y 2, flou 6, étalement 0, couleur #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

Questions fréquentes

Quel est l'ordre des valeurs de box-shadow ?

Chaque couche s'écrit sous la forme offset-x, offset-y, rayon de flou, rayon d'étalement, couleur, avec un mot-clé inset facultatif devant. Cet outil affiche toujours les quatre longueurs en px (offset-x, offset-y, flou, étalement), de sorte que l'ordre est sans ambiguïté et facile à ajuster à la main ensuite.

Puis-je ajouter une ombre semi-transparente ou colorée ?

Oui. Saisissez n'importe quelle couleur CSS dans le champ de couleur — un hex complet à 8 chiffres comme #00000040 (les deux derniers chiffres correspondent à l'alpha) donne une ombre semi-transparente, et vous pouvez utiliser des couleurs nommées ou n'importe quel hex. L'échantillon du sélecteur gère les couleurs unies #rrggbb ; pour l'alpha, modifiez le champ texte.

Comment empiler plusieurs ombres ?

Cliquez sur Ajouter une couche pour chaque ombre supplémentaire. Le CSS généré sépare chaque couche par des virgules, du haut vers le bas — la première couche est peinte en dernier (au-dessus). Utilisez-le pour de la profondeur en couches façon Material ou pour combiner une lueur extérieure avec un reflet inset.

Que fait la case inset ?

Inset dessine l'ombre à l'intérieur de la bordure de l'élément, créant un effet enfoncé ou de lueur intérieure au lieu d'une ombre portée extérieure. Cochez-la par couche ; vous pouvez mélanger ombres inset et extérieures dans la même valeur box-shadow.

Mes données sont-elles envoyées quelque part ?

Non. Le générateur s'exécute entièrement dans votre navigateur en JavaScript — vos couleurs et vos valeurs ne sont jamais envoyées à un serveur, il fonctionne donc en toute confidentialité et même hors ligne une fois la page chargée.