Catégorie: Développement
Générateur de box-shadow CSS multi-couches
Concevez une ombre en couches à partir d'un seul jeu de réglages
Réglez un décalage, un flou, une extension, une couleur et un nombre de couches, observez un aperçu en direct, et copiez une déclaration box-shadow multi-couches construite comme les designers superposent les ombres pour un vrai relief. Tout s'affiche dans votre propre navigateur.
box-shadow: 0px 4px 6px -1px rgba(23, 33, 28, 0.3), 0px 8px 12px -2px rgba(23, 33, 28, 0.26), 0px 12px 18px -2px rgba(23, 33, 28, 0.22), 0px 16px 24px -3px rgba(23, 33, 28, 0.18), 0px 20px 30px -4px rgba(23, 33, 28, 0.14);
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
Une seule couche de box-shadow ressemble souvent à du brouillard plat ; un vrai relief vient de la superposition de plusieurs couches qui se resserrent et s'estompent en se rapprochant de l'élément, comme la lumière ambiante décroît. Cet outil part d'un seul jeu de réglages de décalage, flou, extension et couleur, plus un nombre de couches, et dérive automatiquement autant de couches progressivement plus resserrées et plus opaques, pour obtenir une ombre superposée convaincante sans régler chacune à la main.
Mode d'emploi
- Choisissez le nombre de couches à générer.
- Réglez le décalage, le flou, l'extension, la couleur et l'opacité de la couche de base.
- Copiez la déclaration box-shadow multi-couches générée.
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é vers un serveur ?
- Non. L'aperçu est une ombre CSS dessinée par votre navigateur et la déclaration est assemblée dans la page.
- Comment les différentes couches sont-elles dérivées ?
- Chaque couche réduit progressivement le décalage, le flou et l'extension en se rapprochant de l'élément, et augmente en opacité à mesure qu'elle s'en rapproche, ce qui reprend le même schéma de resserrement et d'estompage utilisé dans les systèmes d'élévation construits à la main.
- Pourquoi le nombre de couches est-il plafonné ?
- Au-delà de cinq ou six couches, la différence visuelle devient négligeable alors que le CSS continue de grossir, donc le réglage est plafonné pour garder un résultat facile à lire et à coller.