Générateur d'ombre CSS (box-shadow)

Comment ça marche

Saisissez la couleur de l'ombre dans le panneau de gauche : une seule couleur sur une seule ligne, en HEX, RGB ou HSL. La plupart des ombres d'interface partent du noir pur — la force se règle avec le curseur d'opacité, pas avec la couleur : 25 % d'opacité s'écrit rgba(0, 0, 0, 0.25) dans le code. Les décalages horizontal et vertical fixent où tombe l'ombre : garder 8 pixels en vertical et zéro en horizontal donne l'effet naturel d'une lumière venue d'en haut, utilisé presque partout. Le flou décide de la douceur du bord, l'étalement de la distance dont l'ombre dépasse la boîte ; un étalement négatif ramène l'ombre sous la boîte et crée l'effet discret d'une carte soulevée. L'option de direction transforme l'ombre extérieure en ombre intérieure (inset), qui donne l'impression d'une surface enfoncée. Le code de droite suit chaque changement — copiez-le dans votre feuille de style, ou téléchargez l'aperçu en PNG de 1200×800 pixels.

Cet outil est aussi connu sous le nom de generateur box shadow css, ombre css box shadow, ombre portee css, box shadow inset css, code ombre div css, ombre douce css.

Qu'est-ce que box-shadow ?

box-shadow est la propriété CSS qui dessine une ombre à l'extérieur ou à l'intérieur d'une boîte HTML. Elle exige au minimum un couple de décalages et une couleur ; le flou et l'étalement sont facultatifs, et le mot-clé inset déplace l'ombre vers l'intérieur. L'ombre ne change jamais la taille de la boîte et ne capte aucun clic — c'est de la pure peinture, donc le moyen le moins coûteux d'ajouter de la profondeur sans toucher à la mise en page. Plusieurs couches d'ombre s'empilent sur une même boîte avec des virgules.

Qu'est-ce que rgba() ?

rgba() est la notation de couleur CSS qui décrit une couleur par ses canaux rouge, vert et bleu de 0 à 255, avec un quatrième paramètre : une opacité entre 0 et 1. rgba(0, 0, 0, 0.25) signifie un noir au quart de sa force — la surface en dessous reste visible à 75 %. Les couleurs d'ombre utilisent presque toujours cette forme, car une ombre naturelle est translucide et se fond avec le fond sur lequel elle tombe.

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

box-shadow dessine l'ombre autour de la boîte rectangulaire de l'élément : elle suit les coins arrondis, mais si le contenu est un PNG transparent ou une forme découpée, l'ombre tombe quand même en rectangle. filter: drop-shadow() regarde au contraire les pixels visibles : un logo sur fond transparent projette une ombre qui épouse son propre contour. En contrepartie, drop-shadow n'accepte pas d'étalement et ignore inset — pour une ombre intérieure ou une couche étalée, box-shadow reste la seule option. La règle pratique : box-shadow pour les cartes et panneaux rectangulaires, drop-shadow pour les images détourées.

Le piège de l'ombre dure : équilibrer opacité et flou

L'erreur la plus courante du débutant : une ombre noire totalement opaque avec peu de flou. Au lieu d'une profondeur douce, la boîte reçoit un contour sale. Les ombres réelles sont à la fois translucides et diffuses ; les ombres d'interface se tiennent donc en général entre 10 et 30 % d'opacité, avec un flou d'au moins deux à trois fois le décalage. Une ombre de 0 8 24 pixels paraît naturelle à 25 % et ressemble à une tache à 100 %.

Le second piège est la performance : box-shadow est repeinte à chaque image. Donnez une ombre très floue à des dizaines de boîtes sur une page qui défile et les appareils anciens peuvent saccader. Appliquer le même rendu à moins de boîtes, ou réduire le flou, allège la charge sans différence visible dans la plupart des cas.

Quelle ombre pour quel usage ?

Une ombre n'est pas un décor mais un langage d'élévation : l'utilisateur lit dans l'ombre quel élément est au-dessus.

• Cartes et panneaux → petit décalage, flou moyen (0 2 8 par exemple) : légèrement soulevés
• Menus déroulants et boîtes de dialogue → grand décalage et grand flou (0 12 32) : flottent au-dessus de la page
• Bouton enfoncé, champ de saisie → ombre intérieure (inset) : encastrés dans la surface
• Mise en évidence du focus → décalage et flou à zéro, étalement de 2-3 pixels : entoure la boîte comme un anneau

Questions fréquentes

Que signifie l'ordre des valeurs de box-shadow ?

L'ordre est fixe : décalage horizontal, décalage vertical, flou, étalement, puis la couleur. Le mot-clé inset placé en tête fait tomber l'ombre à l'intérieur de la boîte. Cet outil écrit toujours les cinq valeurs dans cet ordre exact, pour que chaque curseur se retrouve dans le code.

Puis-je empiler plusieurs ombres sur une même boîte ?

CSS le permet : les ombres se listent séparées par des virgules et la première est peinte au-dessus. Cet outil produit une seule couche pour garder le code lisible ; pour deux couches, lancez-le deux fois avec des réglages différents et joignez les valeurs par une virgule.

Que sauvegarde le bouton Télécharger ?

Un PNG de 1200×800 pixels de la carte de l'aperçu — pratique pour montrer le rendu de l'ombre dans une revue de maquette. Pour le code lui-même, utilisez le bouton de copie.

Pourquoi la couleur de l'ombre est-elle écrite en rgba ?

Parce que c'est la transparence qui rend une ombre naturelle : le dernier nombre de rgba est l'opacité entre 0 et 1, et le curseur d'opacité règle exactement cette valeur. Avec une couleur HEX pure, l'ombre serait peinte totalement opaque et masquerait complètement le fond.