Catégorie: Développement
Générateur de Box Shadow CSS
Composez une box-shadow et copiez le CSS
Réglez le décalage, le flou, l'étalement, la couleur et l'opacité, observez un aperçu en direct et copiez une déclaration box-shadow prête à coller. Tout est dessiné par votre propre navigateur.
box-shadow: 0px 8px 24px -4px rgba(23, 33, 28, 0.24);
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
box-shadow prend cinq valeurs dans un ordre fixe, et de petits changements sur l'une d'elles se lisent très différemment à l'écran, ce qui rend l'écriture à l'aveugle inconfortable. Cet outil dessine la vraie déclaration sur une boîte d'aperçu pendant que vous bougez les curseurs. Une seconde couche de contact, plus serrée, peut être ajoutée — l'association que les designers utilisent pour qu'un élément paraisse soulevé plutôt que flou — et l'option intérieure retourne l'ombre vers l'intérieur pour les surfaces enfoncées.
Mode d'emploi
- Réglez le décalage horizontal et vertical, le flou et l'étalement.
- Choisissez une couleur et une opacité, et activez au besoin l'ombre intérieure ou une couche de contact.
- Copiez la déclaration box-shadow dans votre feuille de style.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Quelque chose est-il envoyé ?
- Non. L'aperçu est une ombre CSS peinte par votre navigateur et la déclaration est assemblée dans la page.
- À quoi sert l'étalement ?
- L'étalement agrandit ou rétrécit l'ombre avant qu'elle ne soit floutée. Un étalement négatif la resserre, ce qui empêche une ombre douce de déborder sur les côtés de l'élément.
- Pourquoi deux couches ?
- Une seule ombre large et douce ressemble vite à du brouillard. Ajouter une petite couche plus sombre près de l'élément lui donne un bord de contact, et les deux ensemble se lisent comme de la hauteur.