Ajouter une ombre portée à une image

L'outil Ajouter une ombre portée à une image détache n'importe quelle image de la page avec une ombre douce et crédible — entièrement dans votre navigateur. Importez une photo, une capture d'écran, un logo ou un PNG découpé, faites glisser la source lumineuse pour régler l'angle, puis ajustez le flou, l'étendue, l'opacité et la couleur. Sur un PNG transparent, l'ombre est construite à partir du canal alpha de l'image, donc un produit ou un autocollant projette une ombre selon son propre contour plutôt qu'un rectangle. Exportez un PNG avec un arrière-plan transparent, un JPG sur un fond uni ou en dégradé, ou copiez le code CSS box-shadow correspondant. Rien n'est envoyé — votre image ne quitte jamais votre appareil.

Les trois nombres qui font une ombre : décalage, flou et étendue

Presque toutes les mauvaises ombres viennent d'une erreur sur l'un de ces trois réglages. Le décalage est la distance à laquelle l'ombre est poussée loin du sujet — il indique au regard où se trouve la lumière et à quelle hauteur l'objet flotte. Le flou est la douceur du bord : un petit flou se lit comme une lumière dure et directe (soleil, flash), un grand flou comme une lumière diffuse (ciel couvert, boîte à lumière). L'étendue agrandit ou réduit la forme de l'ombre avant l'application du flou, ce qui permet d'obtenir un halo dense ou une ombre légèrement rentrée sous l'objet.

Comment ajouter une ombre portée à votre image

1. Importez votre image : Glissez une image sur la zone d'import ou appuyez pour en choisir une. Rien n'est envoyé — le fichier est lu directement dans votre navigateur.
2. Placez la lumière : Faites glisser le soleil sur le pavé Source lumineuse. L'ombre tombe du côté opposé, et l'éloigner du centre la pousse plus loin. Les flèches fonctionnent aussi.
3. Façonnez l'ombre : Choisissez un type — Portée, Superposée, Longue ou Lueur — puis réglez le Flou, l'Étendue, l'Opacité et la couleur de l'ombre.
4. Choisissez un arrière-plan : Gardez-le Transparent pour un PNG, ou remplissez-le d'une couleur unie ou d'un dégradé. La Marge supplémentaire ajoute de l'espace autour du résultat.
5. Téléchargez ou copiez : Enregistrez un PNG ou un JPG en taille d'origine, à moitié ou en 2× — ou copiez le CSS généré pour réutiliser la même ombre sur un élément web.

Des ombres qui suivent le sujet, pas le rectangle

La plupart des outils d'ombre en ligne dessinent un rectangle derrière votre fichier. C'est acceptable pour une photo, mais faux pour un produit découpé, un logo ou un autocollant : une bouteille ronde ne doit pas projeter une ombre carrée. Cet outil lit le canal alpha de votre image et construit l'ombre à partir de la silhouette réelle, donc les zones transparentes restent sans ombre. Importez un PNG transparent et vous verrez une note verte le confirmer. Pour une photo opaque ordinaire, la silhouette est simplement le rectangle de l'image — arrondi d'abord si vous réglez un rayon de coin.

Quel type d'ombre utiliser ?

Pourquoi des pourcentages, pas des pixels

Chaque curseur ici est un pourcentage du côté le plus court de l'image. Un flou de 9 % a le même rendu sur une miniature de 400 px que sur une photo de 4000 px, donc un préréglage que vous aimez continue de fonctionner quand vous changez pour une image plus grande — sans recalcul. L'outil affiche tout de même la valeur en pixels équivalente à côté du curseur de flou et dans le panneau CSS, pour quand vous avez besoin de vrais nombres.

Conseils pour une ombre crédible

Mon image est-elle privée ?

Oui. Contrairement aux éditeurs en ligne qui envoient votre photo à un serveur pour traitement, cet outil s'exécute entièrement dans votre navigateur web grâce au canvas HTML5. Votre image ne quitte jamais votre appareil, rien n'est stocké, et il n'y a aucun compte à créer. Fermez l'onglet et l'image disparaît.

Questions fréquentes

Cet outil d'ombre portée est-il gratuit et privé ?

Oui. Il est entièrement gratuit et s'exécute dans votre navigateur web grâce au canvas HTML5, donc votre image n'est jamais envoyée à un serveur et reste sur votre appareil. L'image téléchargée n'a pas de filigrane et aucune inscription n'est requise.

L'ombre suit-elle la forme d'un PNG transparent ?

Oui. L'ombre est construite à partir du canal alpha de l'image, donc un produit découpé, un logo ou un autocollant projette une ombre selon son propre contour plutôt qu'un rectangle. Si l'image est une photo opaque normale, la silhouette est le rectangle de la photo, éventuellement avec des coins arrondis.

Comment garder le fond transparent ?

Réglez l'arrière-plan sur Transparent et téléchargez un PNG. Seuls l'ombre et le sujet sont dessinés, vous pourrez donc poser le résultat sur n'importe quelle couleur plus tard. Le JPG ne peut pas stocker la transparence, donc un export JPG remplit le fond de blanc.

Quelle est la différence entre le flou et l'étendue ?

Le flou adoucit le bord de l'ombre, en la faisant s'estomper sur une distance. L'étendue agrandit ou réduit la forme de l'ombre elle-même avant le flou : une grande étendue avec un petit flou donne un halo net, tandis qu'une petite étendue avec un grand flou donne un nuage doux.

Pourquoi mon ombre est-elle coupée au bord de l'image ?

Une ombre a besoin d'espace autour de l'image. Cet outil ajoute automatiquement une marge à partir du décalage, du flou et de l'étendue, et vous pouvez en ajouter davantage avec le curseur Marge supplémentaire. Si vous exportez un JPG sur un fond coloré, c'est sur cette marge que l'ombre se pose.

Puis-je obtenir le CSS de la même ombre ?

Oui. Le panneau CSS affiche une règle box-shadow et filter drop-shadow prête à coller, qui correspond aux réglages actuels, en pixels mesurés sur votre image. Copiez-la pour donner le même look à un élément web sans exporter de fichier.

Ressources supplémentaires

• CSS box-shadow — MDN
• filter: drop-shadow() — MDN
• Composition alpha — Wikipédia