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

box-shadow suit la boîte de bordure rectangulaire de l'élément (en respectant border-radius), tandis que drop-shadow suit la forme réelle, y compris les PNG transparents et les formes irrégulières. Cet outil génère du box-shadow.

Puis-je ajouter plusieurs ombres à un même élément ?

Oui. Le CSS permet de lister plusieurs ombres séparées par des virgules, et ce générateur vous permet d'empiler plusieurs couches. Combiner des ombres est la clé d'une profondeur réaliste.

Qu'est-ce qu'une ombre inset ?

Une ombre inset est dessinée à l'intérieur de l'élément plutôt qu'à l'extérieur. Elle est utile pour les boutons enfoncés, les champs de saisie et les surfaces creusées. Activez l'option Inset sur n'importe quelle couche.

Les box-shadow ralentissent-elles ma page ?

Quelques ombres statiques ne posent aucun problème. Les ombres grandes et très floues sont plus coûteuses à peindre, donc utilisez-les avec précaution sur les éléments animés ou fréquemment redessinés.

Mes données sont-elles envoyées à un serveur ?

Non. Le générateur fonctionne entièrement dans votre navigateur. Rien n'est envoyé à un serveur et aucune inscription n'est requise.

Générateur de CSS Box Shadow

Aperçu en direct

Aperçu

Presets

Couches d'ombre

Couche 1

Décalage X0px

Décalage Y10px

Flou15px

Étalement-3px

Couleur

Opacité (25%)

Inset (ombre intérieure)

Au moins une couche est requise.

Sortie CSS

box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.25);

Outils externes associés

Certains liens sont des liens d'affiliation.

Adobe Creative CloudUn abonnement regroupant plus de 20 applications créatives, dont Photoshop, Illustrator, Premiere Pro et After Effects. Inclut un stockage cloud et l'accès à Adobe Fonts et Stock. La boîte à outils incontournable pour les créatifs professionnels.CanvaUne plateforme de design populaire en glisser-déposer pour créer des publications sur les réseaux sociaux, des présentations, des affiches et plus encore. Propose une immense bibliothèque de modèles, photos et graphiques gratuits et premium. Aucune expérience en design requise.

Outils associés

Générateur de Palette de CouleursGénérez des palettes de couleurs harmonieuses à partir d'un HEX de base avec des schémas complémentaire, analogue, triadique et plus. Verrouillez des couleurs, régénérez le reste et exportez en CSS, Tailwind ou JSON.Générateur de DégradéCréez des dégradés CSS linéaires, radiaux et coniques avec plusieurs points de couleur. Ajustez l'angle, la forme et le centre, puis copiez le CSS background ou la valeur Tailwind en un clic.Outil d'association de policesTrouvez les meilleures combinaisons Google Fonts titre × corps, prévisualisez-les en temps réel et copiez le CSS en un clic.Convertisseur de CouleurConvertissez n'importe quelle couleur entre HEX, RGB, HSL, HSV et RGBA à la fois. Modifiez une valeur, copiez en un clic, avec alpha et contraste WCAG.

Concevez une CSS box-shadow visuellement et copiez le code en un clic. Faites glisser les curseurs pour régler le décalage, le flou, l'étalement, la couleur et l'opacité pendant que l'aperçu se met à jour instantanément. Empilez plusieurs couches d'ombre, basculez n'importe quelle couche en ombre intérieure (inset) et partez de presets prêts à l'emploi. Tout s'exécute dans votre navigateur, sans envoi de données.

Comment l'utiliser

Déplacez les curseurs Décalage X/Y, Flou et Étalement en observant l'aperçu en direct.
Choisissez la couleur de l'ombre et ajustez son opacité.
Ajoutez des couches pour plus de profondeur ou convertissez une couche en ombre intérieure (inset).
Copiez le CSS de box-shadow ou basculez sur l'onglet Tailwind pour obtenir une valeur utilitaire.

Les propriétés de box-shadow

Une CSS box-shadow s'écrit : décalage X, décalage Y, flou, étalement, couleur — avec le mot-clé inset en option. Vous pouvez lister plusieurs ombres séparées par des virgules.

Décalage X & Y

Le décalage X déplace l'ombre horizontalement, le Y verticalement. Les valeurs positives poussent l'ombre vers la droite et le bas ; les valeurs négatives vers la gauche et le haut.

Rayon de flou

Le flou adoucit les bords de l'ombre. 0 donne un bord net et précis ; des valeurs plus élevées créent une ombre douce et diffuse. Il ne peut pas être négatif.

Rayon d'étalement

L'étalement agrandit (positif) ou réduit (négatif) l'ombre avant d'appliquer le flou. Un léger étalement négatif est pratique pour des ombres subtiles et serrées.

Inset (ombre intérieure)

Le mot-clé inset dessine l'ombre à l'intérieur de l'élément plutôt qu'à l'extérieur, idéal pour les boutons enfoncés, les champs de saisie et les effets de profondeur interne.

Couleur et opacité

Les ombres semblent généralement plus naturelles avec une couleur sombre semi-transparente plutôt qu'un noir plein. Réduisez l'opacité pour un effet réaliste.

Fonctionnalités

Plusieurs couches d'ombre

Empilez plusieurs ombres sur un même élément. Associer une ombre sombre et serrée à une plus large et plus douce est le secret d'une profondeur réaliste et soignée.

Ombres intérieures

Activez l'option inset sur n'importe quelle couche pour créer des effets de pression, de gravure ou d'enfoncement — parfait pour les boutons et les champs de formulaire.

Presets prêts à l'emploi

Partez des niveaux d'élévation Material, d'ombres douces ou dures, du neumorphism ou d'une lueur colorée, puis affinez à votre goût.

Aperçu clair et sombre

Basculez le fond de l'aperçu entre clair et sombre pour vérifier le rendu de l'ombre sur différentes surfaces.

Copie en un clic (CSS ou Tailwind)

Copiez une déclaration box-shadow prête à coller ou récupérez une valeur arbitraire Tailwind comme shadow-[…] pour les projets utility-first.

Cas d'usage courants

Cartes et conteneurs

Donnez aux cartes une légère élévation avec une ombre douce et peu opaque pour que le contenu semble regroupé et surélevé.

Boutons et états hover

Ajoutez une ombre subtile aux boutons, une plus grande au survol, ou une ombre intérieure pour simuler l'effet de pression.

Neumorphism

Combinez une ombre claire et une ombre sombre sur des côtés opposés pour obtenir le look neumorphique doux et extrudé.

Lueur et anneaux de focus

Utilisez une ombre colorée sans décalage et avec un léger étalement pour créer une lueur ou un indicateur de focus accessible.

Notes et conseils

De nombreuses ombres grandes et floues peuvent affecter les performances de rendu — utilisez-les avec modération sur les éléments animés ou défilants.
Les valeurs de flou très élevées sont les plus coûteuses à peindre ; préférez empiler des ombres plus petites pour plus de réalisme.
Maintenez un contraste suffisant pour que les ombres restent subtiles et ne nuisent pas à la lisibilité.
Les ombres inset sont dessinées à l'intérieur de l'élément et ne dépassent pas sa boîte de bordure.

Questions fréquentes

Quelle est la différence entre box-shadow et filter: drop-shadow ?: box-shadow suit la boîte de bordure rectangulaire de l'élément (en respectant border-radius), tandis que drop-shadow suit la forme réelle, y compris les PNG transparents et les formes irrégulières. Cet outil génère du box-shadow.
Puis-je ajouter plusieurs ombres à un même élément ?: Oui. Le CSS permet de lister plusieurs ombres séparées par des virgules, et ce générateur vous permet d'empiler plusieurs couches. Combiner des ombres est la clé d'une profondeur réaliste.
Qu'est-ce qu'une ombre inset ?: Une ombre inset est dessinée à l'intérieur de l'élément plutôt qu'à l'extérieur. Elle est utile pour les boutons enfoncés, les champs de saisie et les surfaces creusées. Activez l'option Inset sur n'importe quelle couche.
Les box-shadow ralentissent-elles ma page ?: Quelques ombres statiques ne posent aucun problème. Les ombres grandes et très floues sont plus coûteuses à peindre, donc utilisez-les avec précaution sur les éléments animés ou fréquemment redessinés.
Mes données sont-elles envoyées à un serveur ?: Non. Le générateur fonctionne entièrement dans votre navigateur. Rien n'est envoyé à un serveur et aucune inscription n'est requise.