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

Ajustez le décalage, le flou, l'étalement, la couleur et l'opacité avec des curseurs pour générer un box-shadow CSS avec aperçu en direct. Copiez le code généré en un clic.

Astuces d'utilisation

  • Vous pouvez saisir des valeurs exactes dans les champs numériques plutôt que de faire glisser les curseurs lorsque vous avez besoin de précision.
  • Activez « inset » pour dessiner l'ombre à l'intérieur de l'élément, créant un effet enfoncé plutôt que surélevé.
  • Augmenter le spread agrandit tout le contour de l'ombre, tandis qu'augmenter le blur adoucit et diffuse ses bords ; combinez les deux pour obtenir des textures différentes.
  • Réduire l'opacité rend l'ombre plus légère et naturelle, ce qui est utile lorsque des éléments se chevauchent sur des fonds colorés.
  • Le CSS généré peut être collé directement dans votre feuille de style ; il se combine particulièrement bien avec les effets de survol sur les boutons et les cartes.

Questions fréquentes

Le rayon de flou (blur) détermine à quel point le bord de l'ombre paraît doux : une valeur plus élevée étale le dégradé sur une zone plus large. Le rayon d'étalement (spread), lui, modifie la taille de la forme de l'ombre elle-même : les valeurs positives l'agrandissent par rapport à l'élément, les valeurs négatives la réduisent. Combiner les deux permet un contrôle fin de la texture de l'ombre.

Le mot-clé inset dessine l'ombre à l'intérieur de la bordure de l'élément plutôt qu'à l'extérieur. Alors qu'un box-shadow normal donne l'impression que l'élément flotte au-dessus de la page, inset lui donne un aspect enfoncé ou encastré, souvent utilisé pour styliser la bordure des champs de formulaire.

La propriété CSS box-shadow accepte une liste d'ombres séparées par des virgules, ce qui permet d'en superposer plusieurs pour un rendu plus tridimensionnel. Cet outil se concentre sur la génération d'une seule ombre par souci de simplicité ; si vous avez besoin de plusieurs couches, vous pouvez ajouter manuellement des valeurs séparées par des virgules au CSS généré.

box-shadow est une propriété CSS standard prise en charge par tous les navigateurs modernes, y compris Internet Explorer 9 et versions ultérieures. Des préfixes propriétaires comme -webkit- et -moz- étaient autrefois nécessaires, mais aujourd'hui la propriété fonctionne partout sans préfixe.

Une ombre noire totalement opaque (0 % de transparence) peut paraître peu naturelle ou trop marquée selon la couleur de fond. Réduire l'opacité pour créer un noir ou un gris semi-transparent produit une ombre plus douce qui s'intègre naturellement à n'importe quel fond.
ツールくん

Anecdote — comment box-shadow a transformé l'expressivité du design web

Avant la standardisation de box-shadow dans CSS3, créer une ombre portée sur le web impliquait généralement de la pré-dessiner dans une image de fond à l'aide d'un logiciel de retouche, ou de la simuler en superposant plusieurs éléments div avec des fonds en dégradé. Le moindre ajustement de la forme ou de la douceur de l'ombre obligeait à refaire l'image, ce qui rendait l'itération de design lente et coûteuse.

Lorsque les navigateurs ont commencé à implémenter box-shadow dans le cadre de CSS3 vers 2009, une ombre pouvait être produite avec une seule déclaration CSS. Plus besoin de ressources image, les pages devenaient plus légères à charger, et les ombres conservaient correctement leur forme même quand la mise en page s'adaptait de façon responsive.

Lorsque Google a présenté Material Design en 2014, il a construit le concept d'« elevation » sur la base de box-shadow : chaque élément se voit attribuer une hauteur sur l'axe Z, et les éléments placés plus haut projettent des ombres plus grandes et plus sombres. Cela a donné aux interfaces autrement planes une sensation de profondeur et de hiérarchie, une idée qui influence encore de nombreux systèmes de design aujourd'hui.

Plus d'outils dans cette catégorie