Générateur d'ombres CSS

À propos de cet outil

Ce générateur d'ombres CSS permet de composer visuellement une ou plusieurs ombres pour une boîte (box-shadow), un texte (text-shadow) ou une forme transparente (drop-shadow). Réglez le décalage, le flou, la diffusion, la couleur, l'opacité et le caractère intérieur de chaque ombre, essayez un des exemples (élévation douce, ombres en couches, néomorphisme, lueur colorée, anneau de focus…) ou générez automatiquement une ombre naturelle en couches. L'aperçu a son propre fond et sa propre couleur d'élément, pour juger l'ombre dans le contexte réel.

Comment utiliser cet outil

1. Choisissez le type d'ombre (boîte, texte ou forme) puis un exemple de départ si vous le souhaitez.
2. Réglez chaque ombre avec les curseurs (décalage X et Y, flou, diffusion, opacité) et sa couleur, et ajoutez-en une autre pour un effet en couches.
3. Adaptez le fond de l'aperçu, la couleur de l'élément et son arrondi pour voir l'effet comme sur votre page.
4. Copiez le code CSS généré, prêt à coller dans votre feuille de style.

Anatomie de box-shadow

La propriété box-shadow dessine une ombre derrière (ou, avec inset, à l'intérieur de) la boîte d'un élément. Chaque ombre se décrit avec jusqu'à six éléments, dans cet ordre :

Plusieurs ombres se séparent par des virgules, la première étant dessinée au-dessus des suivantes. Une box-shadow n'affecte jamais les dimensions de l'élément ni la mise en page ; une ombre intérieure est découpée à la zone de remplissage (padding box) et passe sous le contenu.

Créer une ombre naturelle : lumière, hauteur et couleur

Une ombre convaincante raconte une histoire de lumière. Quatre principes suffisent à la plupart des interfaces :

1. La lumière vient d'en haut. Un décalage vertical positif et un décalage horizontal faible (voire nul) donnent un rendu naturel et cohérent sur tous les éléments de la page. Mélanger des directions de lumière donne un résultat brouillon.
2. Plus c'est haut, plus c'est flou et décalé. Un élément « posé » (carte) a une ombre courte et nette ; un élément « flottant » (menu, fenêtre modale) a une ombre plus longue, plus diffuse, mais pas plus foncée. Définissez cinq niveaux d'élévation réutilisables dans votre système de design.
3. Superposez plusieurs couches. L'ombre d'un objet réel est dense près du contact et se dissipe avec la distance. Une seule ombre floue ne sait pas faire les deux ; plusieurs ombres dont le décalage et le flou doublent à chaque couche (1, 2, 4, 8, 16 px…), chacune très transparente, s'en rapprochent bien mieux. C'est ce que fait le générateur « en couches » de l'outil.
4. Teintez l'ombre. Une ombre noire pure paraît sale sur un fond coloré. Une ombre de la teinte du fond, en plus sombre et saturée (un brun sur un fond crème), s'intègre naturellement. Gardez l'opacité basse : la plupart des bonnes ombres se situent entre 5 % et 25 % par couche.

box-shadow, text-shadow, drop-shadow : choisir la bonne ombre

Pour ombrer une image PNG au fond transparent, box-shadow dessinerait l'ombre du rectangle de l'image : c'est drop-shadow() qui épouse la forme de l'objet. Pour plusieurs ombres, on enchaîne plusieurs fonctions (drop-shadow(…) drop-shadow(…)), sans virgule.

Effets courants et leurs pièges

• Lueur (glow). Une ombre sans décalage, très floue et colorée (0 0 24px), souvent doublée d'une seconde plus large. Elle fonctionne surtout sur fond sombre.
• Anneau de focus ou de sélection. 0 0 0 4px (flou nul, diffusion de 4 px) trace un contour net qui épouse les arrondis. Attention : il disparaît en mode de contraste forcé de Windows, où box-shadow et text-shadow sont forcées à none. Gardez toujours un outline pour l'indicateur de focus (il peut être transparent : le mode de contraste forcé le rendra visible) ou prévoyez une bordure de repli dans @media (forced-colors: active).
• Néomorphisme. Deux ombres opposées, une claire et une sombre, qui font émerger l'élément de son fond de même couleur. Joli sur une capture, mais les bords sont très peu contrastés : un bouton ou un champ réalisé ainsi peut devenir invisible pour une personne malvoyante. À réserver aux éléments décoratifs.
• Ombre intérieure (inset). Idéale pour un champ de saisie ou un bouton « enfoncé » : l'ombre au-dessus du bord donne l'illusion d'un creux.
• Lisibilité d'un texte sur une image. Une text-shadow aide, mais un voile en dégradé derrière le texte reste plus fiable : vérifiez le contraste à l'endroit le plus défavorable.

Performance : à quoi faire attention

• Quelques ombres sur quelques éléments n'ont pas de coût mesurable. En revanche, les ombres très floues, nombreuses (une par ligne d'une longue liste) ou animées sur de grandes surfaces demandent au navigateur de les recalculer à chaque image, ce qui peut saccader sur mobile.
• N'animez pas directement box-shadow d'un élément qui bouge ou grandit. Placez plutôt l'ombre finale sur un pseudo-élément (::after) et animez son opacity, qui est peu coûteuse.
• Évitez les ombres à flou démesuré : au-delà de 100 à 150 px, le gain visuel est négligeable et le coût de rendu grandit.
• Lorsqu'un même ensemble d'ombres sert partout, définissez-le une fois dans une variable CSS (--ombre-2: 0 4px 8px rgba(...)) et utilisez box-shadow: var(--ombre-2) : la cohérence visuelle y gagne autant que la maintenance.

Pour choisir la couleur d'ombre à partir de votre palette, utilisez le convertisseur de couleurs ; pour arrondir les coins du même élément, le générateur de border-radius.

Questions fréquentes