Générateur d'Ombres CSS (box-shadow) — Créer des Ombres Visuellement
La propriété CSS box-shadow peut créer des effets sophistiqués — ombres portées douces, surélevations Material Design, néon lumineux — mais sa syntaxe à plusieurs paramètres est difficile à maîtriser. Notre générateur visuel simplifie la création d'ombres CSS élaborées.
Comprendre la syntaxe box-shadow
La propriété box-shadow accepte : offset-x, offset-y, blur-radius, spread-radius, color et le mot-clé optionnel inset. Les ombres multiples sont séparées par des virgules. Par exemple : box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
Comment utiliser notre Générateur
- Ajustez les curseurs pour le décalage X/Y, le flou, l'expansion et la couleur.
- Basculez en mode inset pour les ombres intérieures (effet creux).
- Ajoutez plusieurs ombres pour des effets layered sophistiqués.
- Copiez le code CSS généré directement dans votre feuille de style.
Effets populaires avec box-shadow
- Élévation Material : Ombres douces à différentes hauteurs simulant des surfaces physiques.
- Néon/Glow : Ombres colorées sans décalage pour les effets lumineux.
- Neumorphisme : Combinaison d'ombres claires et sombres pour un relief 3D subtil.
- Contour Focus : Ombres spread-only comme alternative accessible à outline.
Prêt à l'essayer ? Utilisez notre Générateur d'Ombres CSS gratuitement — sans inscription, fonctionne dans votre navigateur.
Questions fréquentes
Quelle est la différence entre box-shadow et filter: drop-shadow() ?
box-shadow s'applique à la boîte rectangulaire de l'élément. filter: drop-shadow() suit le contour réel de l'élément (forme, transparence) — essentiel pour les images PNG et les SVG découpés.
Comment créer une ombre portée douce et réaliste ?
Utilisez plusieurs ombres superposées avec des opacités décroissantes. Tailwind CSS utilise cette technique : une ombre large peu opaque combinée à une ombre petite plus opaque crée un effet naturel.
Les ombres CSS affectent-elles les performances ?
Les ombres simples ont un impact minimal. Les ombres multiples sur de nombreux éléments ou sur des animations peuvent ralentir le rendu. Préférez box-shadow à filter: drop-shadow() pour les performances.