À propos de cet outil
Ce générateur crée une ombre unique avec des décalages horizontal et vertical, un rayon de flou, un étalement, une couleur, une opacité et l'option inset. Les paramètres valides s'appliquent immédiatement à la carte d'aperçu.
Mode d'emploi
- Réglez les décalages horizontal et vertical ainsi que le rayon de flou.
- Choisissez l'étalement, la couleur et l'opacité de l'ombre.
- Activez inset pour obtenir une ombre intérieure.
- Vérifiez l'aperçu et copiez le CSS, ou réinitialisez l'ombre.
Exemples
- Un décalage horizontal négatif déplace l'ombre vers la gauche.
- Un étalement positif agrandit l'ombre ; un étalement négatif la réduit.
- L'option inset place l'ombre à l'intérieur de la boîte.
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);Fonctionnement et explications CSS
box-shadow accepte dans l'ordre offset-x, offset-y, blur-radius, spread-radius et color, avec inset en option. Les décalages et l'étalement peuvent être négatifs ; le flou doit être positif ou nul. L'opacité détermine le mélange de l'ombre avec l'arrière-plan.
Utilisations courantes
- Donner de la profondeur aux panneaux, fenêtres de dialogue et boutons.
- Comparer des ombres douces et nettes.
- Créer des ombres intérieures pour les éléments de formulaire.
Confidentialité
La saisie, les calculs, la génération CSS et les aperçus sont entièrement traités dans votre navigateur. Aucun contenu n'est envoyé à un serveur. Aucun backend, base de données, API en ligne ou CDN tiers n'est utilisé, et vos données ne sont pas enregistrées automatiquement.
FAQ
Quelle est la différence entre blur et spread ?
blur adoucit les contours. spread agrandit ou réduit la forme de l'ombre avant l'application du flou.
Que signifie inset ?
inset remplace l'ombre extérieure par une ombre à l'intérieur de la boîte.
box-shadow accepte-t-il des valeurs négatives ?
Les décalages horizontal et vertical ainsi que l'étalement peuvent être négatifs. Le rayon de flou ne le peut pas.
Cet outil permet-il de superposer plusieurs ombres ?
Cette page génère une seule ombre. CSS permet toutefois de séparer plusieurs couches de box-shadow par des virgules.