Générateur de Box Shadow

Ajustez les curseurs pour créer une ombre portée ou interne sur le cadre d'aperçu, puis copiez le CSS box-shadow généré. Contrôlez le décalage horizontal et vertical, le rayon de flou, le rayon d'extension, la couleur et l'opacité — sans avoir à mémoriser l'ordre des arguments ni à convertir les couleurs en rgba() à la main.

En quoi consiste cet outil ?

box-shadow est la propriété CSS qui dessine une ombre derrière (ou à l'intérieur) d'un élément. Écrite à la main, elle demande jusqu'à cinq valeurs dans l'ordre — décalage horizontal, décalage vertical, rayon de flou, rayon d'extension et une couleur — plus le mot-clé optionnel inset, un ensemble facile à mélanger ou à rendre trop discret ou trop lourd du premier coup.

Cet outil transforme cela en manipulation directe : faites glisser un curseur, observez l'ombre changer sur le cadre d'aperçu en direct, et copiez le CSS exact une fois le rendu satisfaisant. Le sélecteur de couleur associé à un curseur d'opacité génère automatiquement une valeur rgba() correcte, car les ombres transparentes rendent généralement mieux que les ombres totalement opaques.

Pourquoi l'utiliser ?

L'aperçu se met à jour instantanément à chaque réglage — voyez l'ombre exacte avant de valider le code.
Contrôle complet du décalage-x, décalage-y, flou, extension, couleur et opacité au même endroit.
Un clic ajoute inset pour un effet enfoncé plutôt qu'une ombre portée flottante.
Génère du CSS prêt à coller, avec la couleur déjà convertie en rgba() à l'opacité choisie.
Fonctionne entièrement dans votre navigateur — rien de ce que vous configurez n'est envoyé où que ce soit.
Gratuit, sans inscription, fonctionne sur mobile.

Mode d'emploi

Réglez le décalage X et Y pour positionner l'ombre — les valeurs positives la déplacent vers la droite/le bas, les négatives vers la gauche/le haut.
Augmentez le rayon de flou pour adoucir le bord de l'ombre ; augmentez l'extension pour rendre l'ombre plus grande que l'élément lui-même.
Choisissez une couleur et ajustez l'opacité — les ombres les plus réalistes utilisent 15 à 40 % d'opacité plutôt qu'un noir plein.
Cochez 'inset' si vous voulez que l'ombre apparaisse à l'intérieur de la bordure de l'élément plutôt que derrière.
Copiez le CSS généré et collez-le dans votre feuille de style.

Exemple

Entrée

Décalage : 0px, 10px · Flou : 20px · Extension : 0px · Couleur : noir à 35 % d'opacité

Résultat

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.35);

Une ombre douce directement sous l'élément sans décalage horizontal — l'un des styles d'ombre les plus courants pour les cartes et boutons.

Une seule ombre ou des ombres superposées

Cet outil génère une seule couche d'ombre, ce qui couvre la grande majorité des cas réels — boutons, cartes, fenêtres modales et menus déroulants n'utilisent presque toujours qu'une seule ombre. CSS prend aussi en charge plusieurs ombres séparées par des virgules sur le même élément pour des effets de profondeur plus élaborés (par exemple une ombre sombre et resserrée sous une ombre douce et large), mais c'est un raffinement que vous pouvez ajouter à la main : générez une ombre ici, dupliquez la ligne, ajustez le second jeu de valeurs et reliez-les par une virgule.

Modèles courants de box-shadow

Légère élévation de carte : petit décalage (0–4px), flou modéré (8–16px), noir à 10–20 % d'opacité.
Fenêtre modale/menu élevé : décalage (4–10px) et flou (20–30px) plus importants, opacité de 20–35 % pour une sensation de flottement plus marquée.
Bouton pressé/interne : cochez inset, utilisez un décalage réduit et un flou modéré pour que l'ombre se lise comme un creux plutôt qu'une élévation.
Halo coloré : choisissez une couleur de marque plutôt que le noir, augmentez l'opacité à 40–60 % et augmentez légèrement l'extension pour un effet de halo doux autour des boutons.
Ombre nette/dure : mettez le flou à 0 et l'extension à 0 pour une silhouette décalée et solide plutôt qu'une ombre douce.

À associer avec des coins arrondis

Ombres et coins arrondis sont constamment utilisés ensemble — cartes, boutons et fenêtres modales combinent presque toujours les deux. Utilisez le Générateur de Border Radius pour arrondir les coins du même élément, puis appliquez les deux déclarations CSS générées ensemble.

→ Générateur de Border Radius · Convertisseur d'unités

Foire aux questions

Quelle est la différence entre flou et extension ?

Le rayon de flou adoucit le bord de l'ombre — des valeurs plus élevées la font s'estomper plus progressivement. Le rayon d'extension change la taille de l'ombre avant le flou — une extension positive rend l'ombre plus grande que l'élément de tous les côtés, une extension négative la réduit. La plupart des ombres courantes utilisent le flou en laissant l'extension à 0.

Pourquoi utiliser rgba() plutôt qu'une simple couleur hexadécimale pour l'ombre ?

Une ombre totalement opaque paraît dure et peu réaliste — les ombres réelles sont toujours quelque peu transparentes, laissant légèrement transparaître ce qu'il y a derrière elles. rgba() permet de définir cette transparence directement, c'est pourquoi cet outil génère toujours la couleur avec une valeur alpha plutôt qu'un hexadécimal plein.

Que fait le mot-clé inset ?

Sans inset, l'ombre est dessinée à l'extérieur de la bordure de l'élément, comme si celui-ci flottait au-dessus de la page. Avec inset, l'ombre est dessinée à l'intérieur de la bordure, donnant l'impression que l'élément est enfoncé — couramment utilisé pour les états actifs/pressés des boutons ou des champs de saisie.

Puis-je empiler plusieurs ombres sur le même élément ?

Oui — la propriété box-shadow en CSS accepte une liste séparée par des virgules, et les navigateurs les affichent dans l'ordre donné (la première ombre est au-dessus). Une technique courante superpose une ombre resserrée et plus sombre avec une autre plus large et plus douce pour une profondeur plus réaliste que chacune séparément.

box-shadow affecte-t-il la mise en page ou seulement l'apparence ?

Seulement l'apparence — box-shadow n'affecte jamais la taille de l'élément ni la position des éléments environnants, même avec de grandes valeurs de flou ou d'extension. Si l'ombre semble coupée visuellement, vérifiez la présence d'un overflow: hidden sur un élément parent plutôt que les valeurs de l'ombre elle-même.