Des ombres CSS réalistes en quelques réglages
La propriété box-shadow donne de la profondeur aux cartes, boutons, menus et fenêtres modales. Une seule ombre noire paraît souvent dure ; les interfaces modernes empilent plutôt plusieurs ombres douces et peu opaques, ce qui imite mieux la lumière réelle. Les régler à l’aveugle est fastidieux : ce générateur les affiche en direct.
Chaque couche d’ombre a ses propres réglages : décalage horizontal (X) et vertical (Y), flou, étalement (spread), couleur, opacité et option inset pour une ombre intérieure. Vous pouvez ajouter autant de couches que nécessaire ; elles sont combinées dans une seule déclaration, séparées par des virgules.
Des presets servent de point de départ : ombre douce, élévation marquée, ombre nette, ombre intérieure et un style proche du neumorphism. L’aperçu s’affiche sur une boîte dont vous pouvez modifier la couleur et celle du fond, car une ombre se juge toujours sur la couleur réelle de votre interface.
Le résultat est une ligne box-shadow: ... prête à coller dans votre CSS. Le générateur fonctionne dans votre navigateur et il est gratuit sans limite : pas d’essai à épuiser ni d’abonnement nécessaire.
Comment créer une ombre CSS ?
- Choisissez un preset ou partez d’une ombre vide.
- Réglez le décalage X/Y, le flou, l’étalement, la couleur et l’opacité de la couche.
- Ajoutez d’autres couches ou cochez inset pour une ombre intérieure.
- Adaptez la couleur de la boîte et du fond pour juger le rendu.
- Copiez la déclaration box-shadow.
Quand utiliser le générateur d’ombres ?
- Donner un effet d’élévation à des cartes produits.
- Créer un état de survol pour un bouton.
- Détacher une fenêtre modale ou un menu déroulant du contenu.
- Simuler un champ de formulaire enfoncé avec une ombre inset.
- Essayer un style neumorphism sur un fond clair.
- Harmoniser les niveaux d’élévation d’un design system.
Comprendre la syntaxe box-shadow
- Ordre des valeurs : [inset] décalage-x décalage-y flou étalement couleur, par exemple 0 4px 12px 0 rgba(0,0,0,0.15).
- Un décalage Y positif place l’ombre sous l’élément, comme une lumière venant du haut.
- Le flou ne peut pas être négatif ; l’étalement peut l’être pour obtenir une ombre plus petite que l’élément.
- Plusieurs ombres se séparent par des virgules ; la première est dessinée au-dessus des suivantes.
- box-shadow suit le border-radius de l’élément, mais pas la forme d’une image transparente (utilisez filter: drop-shadow() dans ce cas).
Foire Aux Questions
Le générateur est-il gratuit ?
Oui, entièrement. Les générateurs CSS de ToolStudio sont gratuits et sans limite : vous ajustez les réglages, regardez l’aperçu en direct et copiez le CSS autant de fois que vous voulez, sans compte ni abonnement.
Comment obtenir une ombre douce et réaliste ?
Superposez deux ou trois couches à faible opacité : une ombre proche et peu floue, plus une ombre éloignée et très floue.
À quoi sert l’option inset ?
Elle dessine l’ombre à l’intérieur de l’élément, ce qui donne un effet enfoncé, utile pour les champs de saisie ou le neumorphism.
Les ombres CSS ralentissent-elles la page ?
Une ombre statique est très légère. Évitez simplement d’animer de grandes ombres très floues sur beaucoup d’éléments ; animez plutôt l’opacité d’un pseudo-élément.
box-shadow ou drop-shadow ?
box-shadow suit le rectangle (et les coins arrondis) de l’élément ; filter: drop-shadow() suit la forme réelle d’une image PNG ou SVG transparente.