Comment utiliser : Générateur d’ombres CSS
- Choisissez Ombre de boîte ou Ombre de texte, puis partez d’un préréglage comme En couches (réaliste) ou Neumorphisme.
- Sélectionnez un calque et réglez le décalage X/Y, le flou, l’étalement, la couleur, l’opacité et l’inset à l’aide des curseurs ou des champs numériques.
- Ajoutez, dupliquez ou supprimez des calques : superposer plusieurs ombres douces donne la profondeur la plus naturelle.
- Modifiez l’arrière-plan de l’aperçu, la couleur de la carte et le rayon pour les adapter à votre design, puis cliquez sur Copier le CSS.
Qu’est-ce que la propriété CSS box-shadow ?
box-shadow dessine une ou plusieurs ombres autour (ou à l’intérieur) de la boîte de bordure d’un élément. Chaque ombre s’écrit [inset] <x> <y> [blur] [spread] <couleur>, et les ombres multiples sont séparées par des virgules : la première est affichée au-dessus. Les ombres suivent border-radius, n’affectent pas la mise en page et ne déclenchent pas de barres de défilement.
| Valeur | Effet |
|---|---|
| Décalage X / Y | Déplace l’ombre vers la droite/le bas (les valeurs négatives vont vers la gauche/le haut). |
| Flou | Adoucit le bord ; 0 donne une ombre nette. Ne peut pas être négatif. |
| Étalement | Agrandit (positif) ou réduit (négatif) l’ombre avant le flou. |
| Couleur | Généralement une couleur sombre à faible opacité, par exemple rgba(15, 23, 42, 0.08). |
| inset | Dessine l’ombre à l’intérieur de la boîte : pour les boutons enfoncés et les creux. |
Ombres réalistes et en couches
Les objets réels projettent une ombre de contact nette et une ombre ambiante large et douce. Une seule grande ombre paraît plate ; plusieurs couches aux décalages et flous doublés (1px, 2px, 4px, 8px, 16px…) et à faible opacité semblent naturelles : essayez le préréglage En couches. Un étalement négatif sur une grande couche floutée (Carte en relief) garde l’ombre sous la carte au lieu de déborder sur les côtés. Teintez la couleur de l’ombre vers la teinte de votre arrière-plan plutôt que du noir pur pour un rendu plus propre.
Neumorphisme, halos et anneaux de focus
Le neumorphisme associe une ombre claire (en haut à gauche) et une ombre sombre (en bas à droite) sur un élément de la même couleur que son arrière-plan. Le rendu est doux, mais le contraste est très faible : ne vous fiez pas uniquement à lui pour faire ressortir des boutons ou des états. Une ombre sans flou et avec un étalement positif constitue un excellent anneau de focus qui suit border-radius : 0 0 0 2px #fff, 0 0 0 4px #4f46e5.
text-shadow
text-shadow utilise la même syntaxe, sans spread ni inset. Utilisez-le avec retenue pour la lisibilité sur des images, ou empilez des couches pour des effets néon, contour ou 3D rétro (voir les préréglages Ombre de texte). Évitez les ombres sur le texte courant : elles nuisent à la netteté.
Performance et conseils Webflow
Les grandes ombres floutées sont peu coûteuses à afficher, mais chères à animer. Plutôt que d’animer box-shadow au survol, placez l’ombre de survol sur un pseudo-élément ::after et faites varier son opacity. Dans Webflow, ajoutez chaque couche dans le panneau Style, sous Effets → Ombres portées (choisissez Extérieur ou Intérieur) : le tableau sous la sortie CSS indique les valeurs de chaque couche, l’étalement étant étiqueté Size comme dans Webflow. Associez vos ombres à un arrière-plan issu du Générateur de dégradés CSS.
Aussi recherché comme : box shadow, générateur box-shadow, générateur d’ombre css, ombre portée css, text-shadow, neumorphisme, ombre en couches, ombre intérieure css.
Outils complémentaires : Générateur d’ombres CSS
- Générateur de boutons CSS — Concevez un bouton qui rend bien dans chaque état.
- Convertisseur de couleurs — Collez n'importe quelle couleur CSS — HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato — et obtenez instantanément tous les autres formats, ainsi qu'une palette 50–950 prête à l'emploi.
- Calculateur de colliers de serrage — Saisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une valeur adaptée au zoom clamp() , accompagnée d’explications mathématiques, d’un aperçu en temps réel et d’une échelle complète de la typographie fluide ou de l’espacement.
- Minifieur CSS — Collez une feuille de style pour la réduire instantanément.
Questions fréquentes
Quelle est la différence entre le flou et l’étalement dans box-shadow ?
Comment ajouter une ombre d’un seul côté ?
0 8px 6px -6px rgba(0,0,0,.3) pour une ombre uniquement en bas.Faut-il préférer box-shadow ou filter: drop-shadow() ?
box-shadow suit la boîte et le rayon de l’élément et gère l’étalement et l’inset. filter: drop-shadow() suit la forme réellement visible, y compris les PNG transparents et les SVG, mais n’a ni étalement ni inset et peut être plus lourd à afficher.