Générateur d'Ombres CSS

Référence

Qu'est-ce que CSS box-shadow ?

La propriété CSS box-shadow ajoute un ou plusieurs effets d'ombre autour du cadre d'un élément. Elle est définie par des décalages relatifs à l'élément, des rayons de flou et d'expansion, une couleur et un mot-clé inset optionnel. Les ombres multiples sont séparées par des virgules et rendues d'avant en arrière.

Syntaxe de box-shadow

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x : Distance horizontale. Positif = droite, négatif = gauche.
offset-y : Distance verticale. Positif = bas, négatif = haut.
blur-radius (optionnel, défaut 0) : Des valeurs plus élevées produisent une ombre plus douce et diffuse.
spread-radius (optionnel, défaut 0) : Les valeurs positives agrandissent l'ombre, les négatives la réduisent.
inset (optionnel) : Déplace l'ombre à l'intérieur de l'élément.

Utilisation de plusieurs couches d'ombre

Combiner plusieurs ombres crée des effets de profondeur réalistes. Une technique courante est d'associer une ombre serrée et foncée près de l'élément (pour la définition) avec une ombre grande et légère plus éloignée (pour la profondeur). Material Design et les systèmes de design modernes utilisent des ombres en couches pour communiquer l'élévation.

Conseils de design pour les ombres

Utilisez des couleurs rgba() ou hsla() — les ombres semi-transparentes paraissent plus naturelles que les opaques.
Gardez la source de lumière cohérente — utilisez la même direction de décalage dans toute votre interface.
Évitez le noir pur — utilisez un ton foncé de votre couleur de marque pour des ombres plus douces.
Performance — box-shadow déclenche des opérations de repeinture. Pour les éléments animés, préférez filter: drop-shadow().

Confidentialité

Toute la génération d'ombres s'exécute à 100% dans votre navigateur. Aucune donnée n'est envoyée à un serveur.