Générateur d'ombre CSS
Façonnez une ombre avec des curseurs et copiez le CSS.
Boîte et fond
Fonctionne dans votre navigateur. Rien de ce que vous tapez n'est envoyé nulle part.
- Empilez jusqu'à 8 couches
- Ombres intérieures
- 6 préréglages prêts à l'emploi
Comment créer une ombre CSS
- Partez d'un préréglage, ou déplacez les curseurs de décalage, flou et étalement.
- Ajoutez des couches pour une ombre plus douce et plus naturelle.
- Copiez la ligne box-shadow dans votre CSS.
Ce que fait chaque valeur de box-shadow
| Valeur | Signification | Plage typique |
|---|---|---|
| Décalage X | Déplace l'ombre vers la droite, ou la gauche si négatif | -100 à 100px |
| Décalage Y | Déplace l'ombre vers le bas, ou le haut si négatif | -100 à 100px |
| Flou | Adoucit le bord ; 0 donne une ombre aux bords nets | 0 à 200px |
| Étalement | Agrandit ou réduit l'ombre avant qu'elle ne soit floutée | -100 à 100px |
| Opacité | À quel point la couleur de l'ombre paraît pleine | 10 à 30 % pour un rendu naturel |
Valeurs de départ pour des rendus courants
| Préréglage | Décalage Y | Flou | Étalement | Opacité |
|---|---|---|---|---|
| Douce | 10px | 30px | -5px | 20 % |
| Nette | 6px (aussi X) | 0px | 0px | 100 % |
| Lueur | 0px | 24px | 4px | 55 % |
| Intérieure | 2px | 6px | 0px | 25 % |
En couches et Flottante s'appuient sur ces valeurs en empilant deux ou trois ombres à la fois, ce qu'une seule couche ne peut pas reproduire.
Conseils pour des ombres naturelles
- La vraie lumière projette rarement une ombre d'un noir pur. Utilisez 10 à 30 % d'opacité, et rapprochez la couleur de la teinte du fond pour un rendu plus doux.
- Empilez 2 ou 3 ombres : une petite et serrée près de la boîte et une plus grande et plus floue plus loin, comme les préréglages En couches et Flottante sont construits.
- Un étalement négatif avec un grand décalage vertical donne l'effet de carte flottante courant dans les interfaces modernes.
- Un parent avec overflow: hidden découpe une ombre exactement comme il découpe le contenu, donc ajoutez du remplissage au parent plutôt que de retirer overflow partout.
FAQ Générateur d'ombre
Que signifient les valeurs de box-shadow ?
Dans l'ordre : décalage horizontal, décalage vertical, rayon de flou, rayon d'étalement et couleur. Des décalages positifs déplacent l'ombre vers la droite et vers le bas, et le mot-clé inset la dessine à l'intérieur de la boîte.
Comment rendre une ombre naturelle ?
Empilez deux ou trois ombres douces avec une faible opacité : une petite et serrée près de la boîte et une plus grande et plus floue plus loin. Les vraies ombres sont rarement d'un noir pur à pleine intensité.
Que fait l'étalement ?
L'étalement agrandit ou réduit l'ombre avant qu'elle ne soit floutée. Un étalement négatif avec un grand décalage vertical donne l'effet de carte flottante.
Pourquoi mon ombre est-elle coupée ?
Un élément parent avec overflow: hidden découpe tout ce qui est dessiné en dehors de sa boîte, ombres comprises. Ajoutez du remplissage au parent ou retirez le réglage overflow.
Combien de couches d'ombre puis-je empiler ?
Jusqu'à 8 sur cette page. Le CSS lui-même n'a pas de limite fixe pour les couches de box-shadow, mais au-delà de 3 ou 4, la différence se voit rarement et coûte plus cher à afficher.
Une ombre change-t-elle la taille ou l'espacement d'un élément ?
Non. Une box-shadow est purement visuelle et n'affecte jamais la mise en page, contrairement à une bordure ou un contour, donc les éléments voisins ne bougent jamais quand vous en ajoutez ou en redimensionnez une.