Generateur de Box Shadow CSS
Créez des ombres CSS box-shadow visuellement avec des sliders. Générez le code CSS instantanément, avec support multi-ombres et mode inset. 100% gratuit et sans inscription.
4px
4px
10px
0px
30%
#000000
Créez des ombres CSS sans coder
La propriété CSS box-shadow est l'une des plus puissantes pour donner de la profondeur
à vos interfaces web. Mais trouver les bons paramètrès par tatonnement dans le code peut prendre
beaucoup de temps. Notre générateur vous permet d'ajuster les ombres visuellement et de copier
le CSS en un clic.
Que vous conceviez des cartes, des boutons, des modales ou des formulaires, un bon usage des ombres fait la différence entre une interface plate et une interface moderne et professionnelle.
Fonctionnalités
- Sliders interactifs — Ajustez offset X/Y, flou, diffusion et opacite en temps réel.
- Selecteur de couleur — Choisissez n'importe quelle couleur avec support de l'opacite (rgba).
- Mode inset — Basculez entre ombre externe et interne en un clic.
- Multi-ombres — Combinez jusqu'à 3 ombres pour des effets d'elevation avances.
- Aperçu live — Visualisez le résultat instantanément sur une boîte de demonstration.
- Copie en un clic — Le CSS genere est prêt à coller dans votre code.
Questions fréquentes
A quoi sert la propriété CSS box-shadow ?
La propriete box-shadow ajoute une ou plusieurs ombres portees a un element HTML. Elle permet de creer des effets de profondeur, de relief ou de mise en avant d'elements de l'interface. Elle est largement supportee par tous les navigateurs modernes.
Quelle est la différence entre box-shadow et text-shadow ?
box-shadow s'applique a la boite englobante d'un element (div, button, card...), tandis que text-shadow s'applique uniquement au texte. Pour les interfaces web, box-shadow est beaucoup plus utilise car il permet de styliser les composants entiers.
Que signifie le mode "inset" ?
Sans inset, l'ombre est projetee a l'exterieur de l'element. Avec inset, l'ombre est projetee a l'interieur, creant un effet de creux ou d'enfoncement. C'est utile pour simuler des champs de formulaire actifs ou des boutons enfonces.
Peut-on combiner plusieurs box-shadow ?
Oui, CSS permet d'empiler jusqu'a plusieurs ombres en les separant par des virgules. Cet outil permet d'en generer jusqu'a 3 simultanement. Cette technique est utilisee pour creer des effets d'elevation complexes, comme les shadows du Material Design.
Comment optimiser les performances des box-shadow ?
Les box-shadow peuvent impacter les performances de rendu, surtout quand elles sont animees. Preferez animer opacity ou transform plutot que box-shadow directement. Pour les elements statiques, l'impact est negligeable sur les machines modernes.