Générateur Box Shadow CSS

Qu'est-ce qu'un générateur d'ombres CSS ?

Un générateur d'ombres CSS produit le code box-shadow ou text-shadow pour ajouter de la profondeur, du relief ou des effets de surbrillance à vos éléments HTML. Les ombres bien utilisées rendent une interface plus tactile, hiérarchisent visuellement les éléments et créent une sensation de matière.

La propriété box-shadow accepte plusieurs valeurs : décalage horizontal, vertical, flou, étalement et couleur, plus optionnellement le mot-clé inset pour une ombre intérieure. Plusieurs ombres peuvent être empilées pour des effets complexes. Cet outil vous laisse expérimenter visuellement.

Décomposition de la syntaxe box-shadow

La syntaxe complète est : box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. Les valeurs offset-x et offset-y sont obligatoires et définissent la position de l'ombre par rapport à l'élément. Des valeurs positives déplacent l'ombre vers la droite et vers le bas. Le blur-radius adoucit les bords — une valeur de 0 crée une ombre nette. Le spread-radius étend ou rétrécit l'ombre — des valeurs négatives créent une ombre plus resserrée.

Comment utiliser cet outil

Ajustez les curseurs pour le décalage X, Y, le flou (blur), l'étalement (spread) et choisissez une couleur. L'aperçu se met à jour en temps réel et le code CSS correspondant est généré automatiquement. Cliquez pour copier et coller dans votre projet.

Conseils de design

• Utilisez des ombres subtiles avec une faible opacité pour un rendu propre, moderne et élégant.
• Superposez plusieurs ombres pour une profondeur plus réaliste — une ombre nette et proche associée à une ombre douce et diffuse imite l'éclairage du monde réel.
• Un flou important avec un léger décalage crée un effet de flottement doux, idéal pour les cartes et les modales.
• Un étalement négatif crée une ombre plus resserrée et plus ciblée, utile pour des bordures subtiles.
• Conservez une direction d'ombre cohérente sur l'ensemble de votre page — des sources lumineuses incohérentes paraissent peu naturelles.

Le système d'élévation Material Design

Le Material Design de Google définit des niveaux d'élévation de 0 dp à 24 dp, chacun avec des valeurs d'ombre spécifiques. Une élévation plus élevée implique des valeurs de flou et de décalage plus importantes. Ce système assure une hiérarchie visuelle cohérente dans toute une application. Même si vous ne suivez pas Material Design, le principe d'utiliser des niveaux d'élévation cohérents est précieux pour tout système de conception.

Impact sur les performances

Les ombres portées sont accélérées par le GPU dans les navigateurs modernes et ont un impact minimal sur les performances pour un usage typique. Cependant, des rayons de flou très importants (50px et plus) appliqués simultanément à de nombreux éléments peuvent provoquer des chutes de framerate pendant les animations. Si vous devez animer des ombres, envisagez d'utiliser transform: scale() pour agrandir un pseudo-élément avec une ombre statique plutôt que d'animer directement les valeurs d'ombre.

Questions fréquentes

box-shadow ou filter: drop-shadow ?

box-shadow s'applique à la boîte rectangulaire de l'élément ; filter: drop-shadow suit la forme transparente (utile pour les images PNG transparentes et les SVG). drop-shadow est plus coûteux en performance.

Comment optimiser les performances ?

Limitez les ombres aux éléments importants, évitez de les animer (préférez l'opacité), utilisez will-change avec parcimonie. Pour les très grandes ombres, envisagez des images SVG pré-rendues.