Générateur d'ombres CSS (box-shadow, text-shadow)

Règle box-shadow, text-shadow et filter: drop-shadow() avec des curseurs, empile plusieurs calques d'ombre et vous donne le CSS. Utilisez-le pour fixer la profondeur d'une carte ou d'un bouton, un aspect enfoncé avec inset ou un contour de texte tout en observant un aperçu en direct.

Mode d’emploi

1. Sous « Type », choisissez box-shadow, text-shadow ou filter: drop-shadow.
2. Dans chaque calque sous « Calques d'ombre », réglez « Décalage X », « Décalage Y », « Flou », « Étalement » (box-shadow seulement), « Couleur de l'ombre » et « Opacité ». Activez « Intérieure » pour une ombre interne.
3. Appuyez sur « Ajouter un calque » ou « Dupliquer » pour obtenir d'autres calques et utilisez les flèches pour les réordonner. Décocher un calque l'écarte pour le moment.
4. Dans l'aperçu à gauche, réglez « Arrière-plan », « Couleur de la carte », « Rayon des angles » et « Taille de la carte » pour vous rapprocher de votre écran réel.
5. Choisissez si vous le souhaitez un point de départ sous « Préréglages », puis appuyez sur « Copier » à côté du CSS.

Fonctionnement

• Un calque de box-shadow s'écrit « [inset] x y flou étalement couleur ». Un étalement positif agrandit l'ombre, un étalement négatif la réduit. text-shadow n'a ni étalement ni inset.
• filter: drop-shadow() suit la forme visible (une icône PNG, un SVG) plutôt que la boîte, et plusieurs fonctions écrites à la suite s'empilent.
• Les couleurs sont écrites en HEX lorsqu'elles sont opaques et en rgb(r g b / a) sinon. Une profondeur naturelle vient généralement de deux ou trois calques peu opaques dont le flou augmente.
• Les calques et les réglages de l'aperçu sont enregistrés dans ce navigateur.

Questions fréquentes

Quel est l'ordre des valeurs dans box-shadow ?

Décalage X, décalage Y, flou, étalement, couleur, avec inset placé en premier pour une ombre interne. Par exemple : box-shadow: 0 4px 12px rgb(0 0 0 / 0.15).

Comment donner une ombre naturelle à une carte ?

Empilez deux ou trois calques à 10 à 20 pour cent d'opacité et augmentez pas à pas le décalage vertical et le flou. Les préréglages « Élévation moyenne » et « Douce, 5 calques » sont construits ainsi.

text-shadow peut-il créer un contour de texte ?

Oui. Quatre ombres sans flou dans les quatre directions (1px 1px, -1px -1px, 1px -1px, -1px 1px) forment un contour fin. Le préréglage « Contour de texte » fait exactement cela.

Quelle est la différence entre box-shadow et le filtre drop-shadow ?

box-shadow ombre la boîte rectangulaire de l'élément ; le filtre drop-shadow ombre la forme visible. Pour des icônes ou un SVG sur fond transparent, drop-shadow est le bon choix.