Générateur CSS box-shadow gratuit en ligne. Ajustez décalage, flou, extension et couleur avec aperçu en direct. Copiez le code. Dans le navigateur.
Appuyez sur Ctrl+D pour ajouter cette page aux favoris
Le générateur d'ombres CSS est un outil en ligne gratuit qui édite visuellement la propriété box-shadow.
Oui, vous pouvez ajouter plusieurs ombres pour créer des effets de profondeur complexes. Chaque ombre peut être ajustée individuellement.
Une ombre inset apparaît à l'intérieur de l'élément plutôt qu'à l'extérieur. Alors que box-shadow normal apparaît dehors, inset crée un effet enfoncé.
Les ombres réelles ne sont pas noires : elles correspondent à la couleur du fond assombrie et s'estompent vers les bords. Plutôt qu'une seule ombre noire à 30 %, superposez deux ou trois couches très légères avec des rayons de flou différents : par exemple 1 px collée au bord, 8 px derrière, puis 24 px très diffuse. Supposez une lumière venue d'en haut : ne donnez qu'un décalage vertical et laissez l'horizontal à zéro.
Dans une mise en page statique, le coût est négligeable ; tout change dès qu'on anime. Faire varier la valeur box-shadow au survol oblige le navigateur à recalculer le flou à chaque image, ce qui saccade visiblement sur les appareils peu puissants. Si vous voulez une ombre qui grandit à l'interaction, animez plutôt l'opacité ou le transform d'une couche d'ombre déjà rendue : le rendu est bien plus fluide.