Générateur d'ombres CSS
Créez des box-shadow CSS avec aperçu en direct.
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);Qu'est-ce que box-shadow en CSS ?
La propriete box-shadow de CSS permet d'ajouter des ombres a n'importe quel element HTML. C'est l'un des outils les plus utilises en design web pour creer de la profondeur, de l'elevation et une hierarchie visuelle. Les ombres bien appliquees donnent l'impression que les elements « flottent » au-dessus de la page.
La syntaxe comprend : decalage horizontal (X), decalage vertical (Y), rayon de flou (blur), rayon d'extension (spread), couleur et optionnellement « inset » pour les ombres interieures. Vous pouvez combiner plusieurs ombres en les separant par des virgules.
Questions fréquentes
Qu'est-ce que la propriete inset ?
Inset transforme l'ombre exterieure en ombre interieure. C'est utile pour creer des effets de profondeur, des champs de texte en creux ou des boutons enfonces.
Les ombres affectent-elles les performances ?
Les ombres simples ont un impact minimal. Cependant, des ombres avec un flou tres eleve sur de nombreux elements peuvent affecter les performances sur les appareils lents. Utilisez-les avec moderation.
Puis-je utiliser plusieurs ombres ?
Oui, separez-les par des virgules : box-shadow: 2px 2px 5px rgba(0,0,0,0.1), 0 0 20px rgba(0,0,0,0.05). Cela cree des effets plus realistes et sophistiques.
Envie d'en savoir plus ? Lisez notre guide complet →