Générateur d'ombre CSS

Comment utiliser le générateur d'ombre portée CSS

1. Définir le décalage X et Y — Faites glisser les curseurs de décalage horizontal et vertical pour positionner l'ombre par rapport à l'élément. X positif déplace l'ombre vers la droite ; négatif la déplace vers la gauche. Y positif la déplace vers le bas ; négatif la déplace vers le haut.
2. Ajuster le rayon de flou — Des valeurs de flou plus élevées produisent des ombres plus douces et plus diffuses. Un flou de 0 donne une ombre nette et aux bords durs.
3. Contrôler le rayon d'étalement — L'étalement étend ou contracte l'ombre au-delà des dimensions de l'élément. Les valeurs positives rendent l'ombre plus grande ; les valeurs négatives la réduisent.
4. Choisir la couleur et l'opacité de l'ombre — Choisissez n'importe quelle couleur avec le sélecteur de couleurs et utilisez le curseur d'opacité pour contrôler la transparence. Les ombres semi-transparentes (par exemple, rgba avec un faible alpha) paraissent plus naturelles sur la plupart des arrière-plans.
5. Activer l'ombre intérieure — Cochez l'option "Intérieur" pour inverser l'ombre à l'intérieur de l'élément, créant un effet enfoncé ou gaufré.
6. Appliquer un préréglage — Cliquez sur l'un des préréglages prêts à l'emploi pour des styles d'ombre classiques instantanés.
7. Copier le code CSS — Cliquez sur "Copier" pour copier la déclaration box-shadow générée dans votre presse-papiers.

Comprendre la propriété CSS box-shadow

box-shadow: [inset] offset-x offset-y [blur] [spread] color;

• offset-x — Distance horizontale de l'ombre par rapport à l'élément.
• offset-y — Distance verticale de l'ombre par rapport à l'élément.
• blur-radius — La douceur des bords de l'ombre. Zéro signifie net.
• spread-radius — Contrôle l'étendue de l'ombre.
• color — Toute couleur CSS valide (HEX, RGB, RGBA, HSL). RGBA est recommandé car il permet le contrôle de l'opacité en une seule valeur.
• inset — Mot-clé optionnel qui inverse la direction de l'ombre, la plaçant à l'intérieur de la bordure de l'élément.

Préréglages d'ombre portée — Quand utiliser chaque style

Ombre extérieure vs Ombre intérieure — Quelle est la différence ?

• Ombre extérieure crée l'illusion qu'un élément est soulevé au-dessus de la surface de la page — idéal pour les cartes, les boutons et les conteneurs.
• Ombre intérieure donne l'apparence qu'un élément est enfoncé ou pressé dans la page — couramment utilisé pour les états de bouton actifs, les champs de saisie de texte et les zones.

Conseils pour des ombres portées CSS réalistes

• Utilisez des couleurs **RGBA** avec une faible opacité (0,10–0,20) plutôt que des couleurs entièrement opaques.
• Faites correspondre la direction de l'ombre de manière cohérente sur une page (généralement vers le bas et légèrement vers la droite, simulant une source lumineuse en haut à gauche).
• Superposez plusieurs ombres pour une profondeur plus réaliste (ombre large et douce + ombre sombre et nette).
• Évitez les valeurs de flou trop grandes sur les petits éléments — elles paraissent disproportionnées.
• Les ombres colorées (par exemple, une lueur bleue sur un bouton bleu) sont une technique de conception moderne pour une profondeur cohérente avec la marque.

CSS box-shadow vs filter: drop-shadow() — Différences clés

• box-shadow respecte la boîte englobante rectangulaire de l'élément, quelle que soit sa transparence.
• drop-shadow() suit la forme visible réelle d'un élément (y compris les PNG transparents).
• box-shadow prend en charge inset ; drop-shadow() ne le fait pas.
• box-shadow prend en charge plusieurs couches empilées ; drop-shadow() ne le fait pas.

Prise en charge par les navigateurs et compatibilité inter-navigateurs

Cas d'utilisation courants pour les ombres portées CSS

• Composants d'interface de cartes — Élever les cartes au-dessus de l'arrière-plan d'une page.
• Barres de navigation — Ajouter une ombre inférieure pour créer de la profondeur à l'en-tête.
• Boutons — Simuler un effet de pression 3D lors du survol/des états actifs.
• Modales et dialogues — Séparer les superpositions de l'arrière-plan.
• Champs de formulaire — Lueur intérieure à l'état de mise au point pour l'accessibilité et l'expérience utilisateur.
• Images — Encadrer des photos ou des miniatures avec une subtile bordure d'ombre.
• Info-bulles — Éléments d'interface microscopiques flottants avec une subtile ombre portée.