Quelle est la différence entre `box-shadow` et `filter: drop-shadow()` ?

La différence est fondamentale. `box-shadow` s'applique à la 'boîte' de l'élément, c'est-à-dire son conteneur rectangulaire, ignorant la transparence. `filter: drop-shadow()` s'applique au contenu 'peint' de l'élément. Pour une image PNG avec un fond transparent, `box-shadow` créera une ombre rectangulaire, tandis que `drop-shadow` créera une ombre qui épouse la forme du sujet de l'image.

Le code CSS généré est-il compatible avec tous les navigateurs ?

Oui, la propriété CSS `box-shadow` est aujourd'hui universellement supportée par tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge, et leurs versions mobiles. Les anciens préfixes comme `-webkit-` ou `-moz-` ne sont plus nécessaires pour cette propriété. Vous pouvez utiliser le code généré en toute confiance, il fonctionnera partout.

Puis-je utiliser ce code sur mon site WordPress, Shopify ou autre CMS ?

Absolument. Le code CSS généré est universel. Sur WordPress, vous pouvez l'ajouter dans l'outil de personnalisation de thème ('CSS additionnel'). Sur Shopify, vous pouvez modifier les fichiers CSS de votre thème. Quel que soit le CMS, tant que vous avez un moyen d'ajouter du CSS personnalisé, vous pourrez utiliser le code pour styliser vos images.

Le traitement local de mon image est-il vraiment sécurisé ?

Oui, c'est la méthode la plus sécurisée qui soit. 'Traitement local' signifie que toutes les opérations se déroulent exclusivement sur votre propre ordinateur, à l'intérieur de votre navigateur. Votre image n'est jamais envoyée sur nos serveurs ou sur un quelconque service tiers. Nous n'y avons jamais accès, ce qui garantit une confidentialité totale.

Comment ajouter une ombre portée à une image avec CSS sans outil ?

Vous pouvez le faire manuellement en modifiant votre fichier CSS. Ciblez votre image avec un sélecteur (par exemple `img.ma-photo`) et ajoutez la propriété `box-shadow`. Par exemple : `img.ma-photo { box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.3); }`. Les valeurs correspondent au décalage horizontal, décalage vertical, rayon de flou et couleur. L'inconvénient est que vous devez modifier, enregistrer et rafraîchir la page pour voir chaque changement.

Est-il possible de créer des ombres portées colorées ?

Oui, et c'est une excellente technique de design. Au lieu d'utiliser un noir ou un gris, vous pouvez spécifier n'importe quelle couleur pour votre ombre. Une ombre légèrement teintée avec la couleur complémentaire de l'image ou une couleur de votre charte graphique peut créer un effet visuel très sophistiqué et unique. Notre outil intègre un sélecteur de couleur complet pour vous permettre d'expérimenter facilement.

Convertisseur Image vers CSS Box-Shadow : Générateur Pixel Art

Convertissez instantanément vos petites images en une seule déclaration CSS box-shadow performante.

La confidentialité avant tout

Les fichiers ne quittent jamais votre navigateur
Aucun envoi vers un serveur
Traitement entièrement local sur votre appareil

Qu'est-ce qu'une Ombre Portée CSS (`box-shadow`) ?

En CSS, la propriété `box-shadow` est un outil de design fondamental qui permet d'appliquer une ou plusieurs ombres à la boîte d'un élément HTML, comme une image (``) ou un conteneur (`

`). Elle ne modifie pas l'élément lui-même mais dessine une ombre derrière ou à l'intérieur de celui-ci, créant une impression de profondeur et de hiérarchie visuelle. La syntaxe de base est `box-shadow: offset-x offset-y blur-radius spread-radius color;`. Chaque paramètre joue un rôle précis : - `offset-x` : déplace l'ombre horizontalement (valeurs positives vers la droite, négatives vers la gauche). - `offset-y` : déplace l'ombre verticalement (valeurs positives vers le bas, négatives vers le haut). - `blur-radius` (rayon de flou) : contrôle la netteté de l'ombre. Une valeur de 0 crée une ombre aux bords durs, tandis qu'une valeur plus élevée produit une ombre diffuse et douce. - `spread-radius` (rayon d'étalement) : agrandit ou rétrécit l'ombre. Une valeur positive l'étend, une valeur négative la contracte. - `color` : définit la couleur de l'ombre. L'utilisation du format RGBA (par exemple, `rgba(0, 0, 0, 0.5)`) est courante pour créer des ombres semi-transparentes, plus réalistes. Il est crucial de ne pas confondre `box-shadow` avec `filter: drop-shadow()`. Alors que `box-shadow` s'applique à la boîte rectangulaire de l'élément, `drop-shadow` suit les contours des parties non transparentes de l'image elle-même. Pour une image PNG avec un fond transparent, `drop-shadow` créera une ombre qui épouse la forme du sujet, tandis que `box-shadow` dessinera toujours une ombre rectangulaire.

Pourquoi Utiliser Notre Outil Plutôt qu'un Autre ?

Confidentialité Absolue : Aucun Téléversement: Notre outil fonctionne entièrement en local dans votre navigateur. Votre image ne quitte jamais votre ordinateur, garantissant une conformité totale avec le RGPD et une tranquillité d'esprit absolue.. Ce traitement local signifie que vos données sont protégées et que vous n'avez pas à vous soucier de ce qu'il advient de vos fichiers après utilisation.

Instantanéité et Prévisualisation en Temps Réel: Avec notre générateur, chaque modification d'un curseur est reflétée instantanément sur l'image de prévisualisation. Vous voyez exactement ce que vous obtenez, en temps réel, pour un flux de travail fluide et sans friction.. Cette réactivité vous permet d'expérimenter rapidement des dizaines de variations et de trouver l'ombre parfaite en quelques secondes, pas en quelques minutes.

100% Gratuit et Illimité: Notre générateur d'ombre portée CSS est entièrement gratuit, sans aucune limitation. Utilisez-le autant de fois que vous le souhaitez, pour tous vos projets, sans jamais rencontrer de mur payant.. Nous croyons que les outils fondamentaux pour le développement web devraient être accessibles à tous, sans frais cachés ni abonnement.

Interface Visuelle et Intuitive: Nous transformons le code en une expérience visuelle. Au lieu de manipuler des chiffres abstraits, vous déplacez des curseurs et choisissez des couleurs, ce qui rend le processus de création beaucoup plus naturel et agréable.. Cette approche visuelle démocratise le design CSS, le rendant accessible même à ceux qui ne sont pas des experts en codage.

Aucune Installation Requise: Notre outil est une application web progressive (PWA) qui fonctionne directement dans votre navigateur. Il n'y a rien à installer, rien à mettre à jour. Ouvrez simplement la page et commencez à créer.. C'est la puissance d'un logiciel de bureau avec la simplicité et l'accessibilité du web, disponible sur n'importe quel appareil.

Comment Créer une Ombre Portée CSS sur une Image : Guide Étape par Étape

Notre outil a été conçu pour être le plus intuitif possible. Suivez ces quelques étapes simples pour générer le code de votre ombre portée personnalisée en moins d'une minute.

Choisissez votre image de référence: Cliquez sur le bouton pour sélectionner une image depuis votre ordinateur. Il ne s'agit pas d'un téléversement : votre image reste sur votre machine et est simplement affichée dans l'outil pour vous servir de référence visuelle. Cette approche garantit une confidentialité totale, conformément aux réglementations du RGPD. L'image vous aide à visualiser l'effet de l'ombre dans un contexte réel.
Ajustez les décalages horizontal et vertical: Utilisez les curseurs 'Décalage X' et 'Décalage Y' pour positionner votre ombre. Le décalage X contrôle le positionnement horizontal (gauche/droite) et le décalage Y le positionnement vertical (haut/bas). Ces réglages simulent la direction de la source de lumière. Une lumière venant d'en haut à gauche, par exemple, projettera une ombre en bas à droite.
Définissez le flou et l'étalement: Le curseur 'Flou' ('blur') est essentiel pour le réalisme. Une valeur plus élevée crée une ombre plus douce et diffuse, comme si l'objet était plus éloigné de la surface. Le curseur 'Étalement' ('spread') agrandit ou réduit la taille de l'ombre avant l'application du flou. Une valeur positive donne une ombre plus grande et plus imposante, tandis qu'une valeur négative peut la faire paraître plus compacte.
Choisissez la couleur et l'opacité: Par défaut, les ombres sont souvent noires, mais une ombre noire pure (`#000000`) peut paraître agressive. Cliquez sur le sélecteur de couleur pour choisir une teinte plus subtile. Il est fortement recommandé d'utiliser une couleur avec une transparence (canal alpha). Notre outil utilise le format RGBA, vous permettant d'ajuster l'opacité pour une intégration parfaite avec votre design.
Copiez le code CSS généré: Pendant que vous effectuez vos réglages, le code CSS dans le champ de texte se met à jour en temps réel. Une fois que vous êtes satisfait de la prévisualisation, il vous suffit de cliquer sur le bouton 'Copier'. Le code `box-shadow` complet est alors dans votre presse-papiers, prêt à être collé dans votre feuille de style CSS.

Conseils de Pro pour des Ombres Portées Exceptionnelles

Utilisez des Ombres Multiples pour Plus de Réalisme: La propriété `box-shadow` accepte plusieurs ombres, séparées par des virgules. Vous pouvez superposer une ombre petite et sombre près de l'image avec une ombre plus large et plus claire pour simuler la lumière ambiante. Par exemple : `box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08);`. Cette technique ajoute une profondeur et un réalisme incroyables que l'on retrouve dans les interfaces modernes comme celles de Material Design.

Pensez à `filter: drop-shadow()` pour les PNG Transparents: Si vous travaillez avec une image PNG qui a un fond transparent (par exemple, le logo de votre entreprise ou la photo détourée d'une personne), `box-shadow` créera une ombre rectangulaire décevante. Dans ce cas précis, utilisez plutôt `filter: drop-shadow( ... )`. La syntaxe est similaire, mais cette propriété crée une ombre qui suit parfaitement les contours du contenu visible de l'image, pour un résultat bien plus professionnel.

Optimisez les Performances: Des ombres portées complexes, avec de grandes valeurs de flou et d'étalement, peuvent être coûteuses en termes de performance de rendu pour le navigateur, surtout si elles sont animées ou appliquées à de nombreux éléments. Pour les pages très chargées, privilégiez des ombres plus simples. Utilisez l'inspecteur de performance de votre navigateur pour vérifier que vos ombres ne provoquent pas de ralentissements, notamment lors du défilement.

Garantissez la Cohérence avec les Variables CSS: Pour maintenir une identité visuelle cohérente sur l'ensemble de votre site, définissez vos styles d'ombre dans des variables CSS (Custom Properties). Dans votre fichier CSS principal, déclarez par exemple `:root { --shadow-subtle: 0 2px 5px rgba(0,0,0,0.1); }`. Ensuite, appliquez-la simplement avec `box-shadow: var(--shadow-subtle);`. Si vous décidez de changer le style de l'ombre, vous n'aurez qu'à le modifier à un seul endroit.

Cas d'Usage : Où Utiliser l'Effet d'Ombre Portée ?

🛒 Fiches Produits E-commerce: Sur un site de vente en ligne, comme pour des articles de maroquinerie de luxe ou des produits du terroir français, une ombre portée subtile fait ressortir la photo du produit. Cela lui donne un aspect premium et tangible, incitant l'utilisateur à cliquer pour en savoir plus.

🎨 Portfolios de Créatifs: Pour les photographes, designers ou artistes basés à Paris, Lyon ou Marseille, un portfolio en ligne est une vitrine essentielle. Appliquer une ombre portée aux miniatures de la galerie crée un effet de superposition élégant, donnant l'impression que les œuvres sont posées sur la page.

✍️ Images d'Articles de Blog: Que vous teniez un blog de cuisine sur les pâtisseries françaises ou un blog de voyage sur les villages de Provence, l'image à la une est cruciale. Une ombre portée aide à la détacher du texte, structure la page et rend l'article visuellement plus attrayant dès le premier regard.

👤 Cartes de Profil et Témoignages: Sur une page 'À propos' ou une section de témoignages clients, les photos de profil (trombinoscope) peuvent être mises en valeur avec une ombre discrète. Cela ajoute une touche de professionnalisme et de finition, rendant les cartes de profil plus définies et lisibles.

🚀 Bannières et Appels à l'Action (CTA): Pour faire ressortir une bannière promotionnelle ou un bouton d'appel à l'action contenant une image, l'ombre portée est un excellent outil. Elle crée une hiérarchie visuelle claire, guidant l'utilisateur vers l'action souhaitée sans être intrusive.

Comment utiliser cet outil

Cliquez sur le bouton pour sélectionner une image depuis votre ordinateur. Il ne s'agit pas d'un téléversement : votre image reste sur votre machine et est simplement affichée dans l'outil pour vous servir de référence visuelle. Cette approche garantit une confidentialité totale, conformément aux réglementations du RGPD. L'image vous aide à visualiser l'effet de l'ombre dans un contexte réel.
Utilisez les curseurs 'Décalage X' et 'Décalage Y' pour positionner votre ombre. Le décalage X contrôle le positionnement horizontal (gauche/droite) et le décalage Y le positionnement vertical (haut/bas). Ces réglages simulent la direction de la source de lumière. Une lumière venant d'en haut à gauche, par exemple, projettera une ombre en bas à droite.
Le curseur 'Flou' ('blur') est essentiel pour le réalisme. Une valeur plus élevée crée une ombre plus douce et diffuse, comme si l'objet était plus éloigné de la surface. Le curseur 'Étalement' ('spread') agrandit ou réduit la taille de l'ombre avant l'application du flou. Une valeur positive donne une ombre plus grande et plus imposante, tandis qu'une valeur négative peut la faire paraître plus compacte.
Par défaut, les ombres sont souvent noires, mais une ombre noire pure (`#000000`) peut paraître agressive. Cliquez sur le sélecteur de couleur pour choisir une teinte plus subtile. Il est fortement recommandé d'utiliser une couleur avec une transparence (canal alpha). Notre outil utilise le format RGBA, vous permettant d'ajuster l'opacité pour une intégration parfaite avec votre design.
Pendant que vous effectuez vos réglages, le code CSS dans le champ de texte se met à jour en temps réel. Une fois que vous êtes satisfait de la prévisualisation, il vous suffit de cliquer sur le bouton 'Copier'. Le code `box-shadow` complet est alors dans votre presse-papiers, prêt à être collé dans votre feuille de style CSS.

Outils associés

Questions fréquentes (FAQ)

Comment créer une ombre portée CSS sur une image ?: La manière la plus simple est d'utiliser notre générateur en ligne. Sélectionnez une image de référence, ajustez les curseurs pour le décalage, le flou, l'étalement et la couleur jusqu'à obtenir l'effet désiré. Ensuite, copiez le code CSS `box-shadow` généré et collez-le dans la règle CSS de votre image ou dans une classe dédiée. C'est une méthode visuelle, rapide et sans erreur.
Quelle est la différence entre `box-shadow` et `filter: drop-shadow()` ?: La différence est fondamentale. `box-shadow` s'applique à la 'boîte' de l'élément, c'est-à-dire son conteneur rectangulaire, ignorant la transparence. `filter: drop-shadow()` s'applique au contenu 'peint' de l'élément. Pour une image PNG avec un fond transparent, `box-shadow` créera une ombre rectangulaire, tandis que `drop-shadow` créera une ombre qui épouse la forme du sujet de l'image.
Le code CSS généré est-il compatible avec tous les navigateurs ?: Oui, la propriété CSS `box-shadow` est aujourd'hui universellement supportée par tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge, et leurs versions mobiles. Les anciens préfixes comme `-webkit-` ou `-moz-` ne sont plus nécessaires pour cette propriété. Vous pouvez utiliser le code généré en toute confiance, il fonctionnera partout.
Puis-je utiliser ce code sur mon site WordPress, Shopify ou autre CMS ?: Absolument. Le code CSS généré est universel. Sur WordPress, vous pouvez l'ajouter dans l'outil de personnalisation de thème ('CSS additionnel'). Sur Shopify, vous pouvez modifier les fichiers CSS de votre thème. Quel que soit le CMS, tant que vous avez un moyen d'ajouter du CSS personnalisé, vous pourrez utiliser le code pour styliser vos images.
Le traitement local de mon image est-il vraiment sécurisé ?: Oui, c'est la méthode la plus sécurisée qui soit. 'Traitement local' signifie que toutes les opérations se déroulent exclusivement sur votre propre ordinateur, à l'intérieur de votre navigateur. Votre image n'est jamais envoyée sur nos serveurs ou sur un quelconque service tiers. Nous n'y avons jamais accès, ce qui garantit une confidentialité totale.
Comment ajouter une ombre portée à une image avec CSS sans outil ?: Vous pouvez le faire manuellement en modifiant votre fichier CSS. Ciblez votre image avec un sélecteur (par exemple `img.ma-photo`) et ajoutez la propriété `box-shadow`. Par exemple : `img.ma-photo { box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.3); }`. Les valeurs correspondent au décalage horizontal, décalage vertical, rayon de flou et couleur. L'inconvénient est que vous devez modifier, enregistrer et rafraîchir la page pour voir chaque changement.
Est-il possible de créer des ombres portées colorées ?: Oui, et c'est une excellente technique de design. Au lieu d'utiliser un noir ou un gris, vous pouvez spécifier n'importe quelle couleur pour votre ombre. Une ombre légèrement teintée avec la couleur complémentaire de l'image ou une couleur de votre charte graphique peut créer un effet visuel très sophistiqué et unique. Notre outil intègre un sélecteur de couleur complet pour vous permettre d'expérimenter facilement.