Générateur Box Shadow CSS

La propriété CSS box-shadow ajoute une ou plusieurs ombres à un élément HTML. Elle accepte les paramètres offset-x (décalage horizontal), offset-y (décalage vertical), blur-radius (flou), spread-radius (étendue) et une couleur.

Le mot-clé inset permet de créer une ombre intérieure. On peut empiler plusieurs ombres séparées par des virgules.

La syntaxe est : box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] couleur. Exemple : box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1). Les valeurs entre crochets sont optionnelles.

Pour plusieurs ombres : box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24).

Le blur-radius (flou) contrôle l'adoucissement des bords de l'ombre — plus la valeur est élevée, plus l'ombre est diffuse. Le spread-radius (étendue) agrandit ou réduit la taille de l'ombre avant d'appliquer le flou : une valeur positive l'agrandit, une valeur négative la réduit.

Ces deux paramètres sont optionnels et valent 0 par défaut.

Le mot-clé inset transforme l'ombre extérieure en ombre intérieure. L'ombre est projetée à l'intérieur de l'élément plutôt qu'à l'extérieur. C'est utile pour créer des effets de champ enfoncé, de relief négatif ou des effets de profondeur sur les boutons actifs.

Exemple : box-shadow: inset 0 2px 4px rgba(0,0,0,0.2).

Le neumorphisme utilise deux ombres superposées : une claire en haut à gauche et une sombre en bas à droite. Exemple sur fond gris (#e0e5ec) : box-shadow: 6px 6px 12px #b8bec7, -6px -6px 12px #ffffff.

Ajustez les couleurs selon votre fond. Pour l'effet enfoncé, inversez avec inset : box-shadow: inset 6px 6px 12px #b8bec7, inset -6px -6px 12px #ffffff.