À propos de cet outil
La propriété box-shadow est plus profonde qu’il n’y paraît : décalage, flou, étalement, couleur et le mot-clé inset interagissent, et la vraie profondeur vient généralement de l’empilement de plusieurs ombres. Ce générateur offre un curseur pour chaque valeur et permet d’ajouter plusieurs couches, pour créer aussi bien un léger soulèvement de carte qu’un audacieux effet néomorphique.
Tout se met à jour dans un aperçu en direct, et le CSS box-shadow terminé est à une copie près. Tout tourne dans votre navigateur.
Questions fréquentes
Prend-il en charge plusieurs ombres superposées ?
Oui. Cliquez sur 'Add Layer' pour empiler des ombres supplémentaires — elles sont combinées en une seule valeur box-shadow séparée par des virgules, la première couche étant affichée au-dessus.
Que fait la case à cocher 'inset' ?
Elle transforme cette couche d'une ombre portée extérieure en une ombre intérieure qui apparaît à l'intérieur de la bordure de l'élément, utile pour des effets enfoncés ou creusés.
Comment la transparence de l'ombre est-elle gérée ?
Le curseur d'opacité est combiné au sélecteur de couleur en une couleur hexadécimale à 8 chiffres (#rrggbbaa) pour obtenir une vraie transparence alpha, car le sélecteur de couleur seul ne peut pas stocker de canal alpha.
Mes données de conception sont-elles envoyées quelque part ?
Non, l'aperçu de l'ombre et le CSS généré sont entièrement créés dans votre navigateur — rien n'est envoyé ni stocké sur un serveur.
Que fait une valeur de spread (extension) négative ?
Un spread négatif rétrécit la forme de l'ombre avant le flou, ce qui est souvent utilisé pour que l'ombre paraisse plus fine ou plus ajustée que l'élément lui-même.