Générateur d'ombres CSS
Générez des ombres CSS
Comment utiliser Générateur d'ombres CSS
Générez des ombres CSS Outil gratuit en ligne, sans inscription, sans publicités intrusives. Utilisez maintenant.
À quoi servent les ombres CSS ?
Les ombres ajoutent de la profondeur, de l'élévation et de la hiérarchie visuelle aux interfaces. Material Design de Google, les Human Interface Guidelines d'Apple et la plupart des systèmes de design modernes utilisent les ombres systématiquement pour transmettre quels éléments sont plus proches de l'utilisateur — créant une sensation de profondeur tridimensionnelle dans des interfaces planes.
- Élévation des cartes : Une ombre subtile sur un composant de carte le soulève du fond, signalant que c'est une unité de contenu interactive ou distincte. Des ombres plus profondes indiquent une élévation plus haute — comme les boutons d'action flottants (FAB) dans Material Design de Google.
- Ombres de modales et dropdowns : Les overlays (modales, menus déroulants, infobulles) utilisent des ombres fortes pour indiquer qu'ils flottent au-dessus du contenu de la page — créant une hiérarchie visuelle claire de profondeur.
- Indicateurs de focus : Les box-shadows peuvent remplacer les outlines pour les états de focus :
box-shadow: 0 0 0 3px rgba(123,53,245,0.4)crée un anneau de focus visible sans affecter la mise en page — une technique courante dans les systèmes de design accessibles. - Lisibilité du texte : Une text-shadow subtile sur du texte blanc sur une image garantit la lisibilité quel que soit le contenu de l'image derrière — sans avoir besoin d'un overlay de couleur solide qui bloquerait l'image.
- Néomorphisme : Le style de design néomorphique utilise des ombres doubles — une ombre claire d'un côté et une ombre sombre de l'autre — pour créer un effet 3D extrudé ou incrusté qui semble sculpté dans le fond.
Syntaxe de box-shadow : box-shadow: [inset] offset-x offset-y blur-radius spread-radius couleur. Plusieurs ombres peuvent être empilées : box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05) — technique utilisée dans Material Design pour créer des ombres naturelles multicouches.
Frequently Asked Questions
Quelle est la différence entre box-shadow et drop-shadow() ?
box-shadow s'applique à la boîte rectangulaire de l'élément — il ne suit pas les formes irrégulières comme les images PNG avec des fonds transparents. La fonction CSS filter drop-shadow() suit la forme rendue réelle, y compris les zones transparentes. Utilisez drop-shadow() pour les icônes et images avec transparence ; box-shadow pour les éléments rectangulaires comme les cartes et boutons.
Que fait le mot-clé 'inset' ?
Le mot-clé inset fait apparaître l'ombre à l'intérieur de l'élément plutôt qu'à l'extérieur. Une ombre inset crée l'apparence d'un élément en creux ou pressé — utile pour les états de bouton pressé, les champs de saisie (effet de profondeur interne) ou les éléments UI néomorphiques incrustés.
Qu'est-ce que le spread radius dans box-shadow ?
Le quatrième valeur dans box-shadow est le rayon d'expansion — il agrandit ou contracte l'ombre. Une valeur positive rend l'ombre plus grande que l'élément ; une valeur négative la rend plus petite. Définir offset-x et offset-y à 0 avec une expansion positive crée un effet de contour/lueur uniforme autour de l'élément.
Pourquoi mon ombre semble-t-elle différente dans Safari vs Chrome ?
Les différences de rendu d'ombres entre navigateurs sont généralement dues au rendu des sous-pixels et à la correction gamma. Safari et Chrome utilisent des algorithmes de composition légèrement différents. Pour des résultats cohérents entre navigateurs, utilisez des couleurs RGBA avec des valeurs alpha explicites plutôt que opacity, et testez les ombres dans les deux moteurs de rendu.
Combien de box-shadows puis-je empiler ?
Il n'y a pas de limite stricte — vous pouvez empiler plusieurs box-shadows avec une liste séparée par des virgules. Plusieurs ombres empilées avec différents rayons de flou et opacités créent des ombres d'apparence plus naturelle imitant l'éclairage du monde réel. Material Design de Google définit des recettes d'ombres multicouches spécifiques pour chaque niveau d'élévation.
CSS box-shadow vs outline vs border vs filter: drop-shadow()
box-shadow ajoute une ombre à l'extérieur (ou à l'intérieur avec inset) de la boîte — n'affecte pas la mise en page. outline trace une ligne à l'extérieur de la bordure — n'affecte pas non plus la mise en page, couramment utilisé pour les indicateurs de focus accessibles. border ajoute une ligne à l'intérieur de l'élément — affecte la mise en page. filter: drop-shadow() suit la forme rendue réelle de l'élément, y compris les transparences. Pour l'élévation et la profondeur UI : box-shadow. Pour les anneaux de focus : outline ou box-shadow. Pour les ombres d'icônes : drop-shadow().