Générateur de box-shadow CSS — aperçu en direct
Ajustez un box-shadow CSS pour vos cartes, boutons et autres éléments d’interface
Traitement dans le navigateur · aucun envoi de fichier
Des décalages positifs déplacent l’ombre vers la droite et vers le bas. Une étendue négative réduit l’ombre.
CSS de l’ombre généré.
Mode d’emploi
- Choisissez les décalages horizontal et vertical pour positionner l’ombre.
- Réglez le flou et l’étendue pour contrôler sa douceur et sa taille.
- Sélectionnez une couleur et une opacité. Activez l’ombre intérieure pour une ombre à l’intérieur de l’élément.
- Vérifiez l’aperçu en direct et copiez la déclaration
box-shadowgénérée.
Signification des valeurs
Un décalage horizontal positif déplace l’ombre vers la droite, un décalage négatif vers la gauche. Les décalages verticaux positifs la déplacent vers le bas, les négatifs vers le haut. Le flou doit être nul ou positif ; plus il est grand, plus le contour est doux. Une étendue positive agrandit la forme de l’ombre, une étendue négative la réduit.
Les couleurs sont écrites sous forme de canaux RVB avec une valeur alpha. Par exemple, une opacité de 25 % donne rgba(0, 0, 0, 0.25). Activer l’option d’ombre intérieure place inset au début de la valeur de l’ombre.
Exemple
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.25); crée une ombre noire douce décalée de huit pixels vers le bas. Un décalage horizontal nul la garde équilibrée de gauche à droite.
Pour une ombre plus serrée, comparez une étendue négative avec un flou plus faible : chacun modifie une partie différente de l’effet. Pour les ombres intérieures, vérifiez le résultat à la taille finale du composant, car l’espace intérieur disponible change la quantité d’ombre visible.
Limites et application
Les décalages et l’étendue vont de -100 à 100 pixels. Le flou va de 0 à 200 pixels, et l’opacité de 0 à 100 %. Ce générateur crée une seule ombre ; pour un effet en plusieurs couches, modifiez le CSS copié en ajoutant d’autres valeurs séparées par des virgules.
L’aperçu utilise une boîte de taille fixe. Les dimensions réelles de votre élément, son arrondi, son arrière-plan et les règles overflow de ses parents peuvent modifier le rendu. Une ombre n’occupe pas d’espace dans la mise en page : laissez assez de marge autour du composant final lorsque l’effet dépasse de sa bordure.
Questions fréquentes
Quelle différence entre le flou et l’étendue ?
Le flou adoucit les bords de l’ombre. L’étendue agrandit ou réduit sa forme avant l’application du flou. Une étendue négative rend l’ombre plus petite.
À quoi sert inset ?
Inset dessine l’ombre à l’intérieur de la boîte au lieu de l’extérieur. C’est utile pour des champs en creux ou un effet de bouton enfoncé.
Pourquoi l’ombre est-elle coupée sur ma page ?
Les réglages overflow d’un élément parent ou le manque d’espace peuvent rogner l’ombre. L’aperçu rogne lui aussi les parties d’ombres très grandes qui dépassent de son cadre.
Puis-je superposer plusieurs ombres ?
Ce générateur crée une seule ombre. Pour en superposer plusieurs, ajoutez d’autres valeurs séparées par des virgules dans le CSS copié.
