Générateur de box-shadow CSS
Générez des ombres CSS box-shadow avec des sliders intuitifs. Presets et export du code CSS.
Presets
Couches d'ombre
Aperçu
Code CSS généré
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
Tout savoir sur le générateur de box-shadow CSS
Pourquoi utiliser ce générateur de box-shadow ?
La propriété CSS box-shadow permet d'ajouter des ombres à n'importe quel élément HTML, mais sa syntaxe avec 6 paramètres (décalage X/Y, flou, étendue, couleur, inset) est difficile à mémoriser et à ajuster manuellement. Tâtonner en modifiant les valeurs une à une dans un éditeur de code, puis recharger le navigateur pour voir le résultat, est un processus lent et frustrant pour les développeurs comme pour les designers. Ce générateur visuel avec aperçu en temps réel bénéficie à tous ceux qui travaillent sur l'interface utilisateur : développeurs front-end, designers UI/UX, intégrateurs freelance et apprenants qui découvrent le CSS. Il résout le problème de la courbe d'apprentissage en rendant chaque paramètre immédiatement compréhensible et expérimentable. Le code CSS produit est propre, prêt à copier et compatible avec tous les navigateurs modernes.
Notre générateur offre des sliders intuitifs avec aperçu en temps réel. Testez des presets (subtile, moyenne, forte, inset, néon) et copiez le code CSS en un clic.
Fonctionne entièrement dans votre navigateur. Aucune donnée n'est envoyée. Idéal pour le prototypage rapide et l'expérimentation de designs.
Cas d'utilisation courants
- Développeurs front-end
- Générez rapidement des ombres CSS propres sans tâtonner avec les valeurs manuellement.
- Designers UI/UX
- Expérimentez visuellement différents styles d'ombres pour vos maquettes et design systems.
- Développeurs débutants
- Apprenez la syntaxe box-shadow de façon interactive en voyant l'effet de chaque paramètre en temps réel.
- Freelances et agences
- Gagnez du temps sur les ajustements visuels et copiez directement le code CSS dans vos projets.
Comment générer une ombre CSS
Ajustez les sliders pour le décalage horizontal (X), vertical (Y), le rayon de flou et l'étendue de l'ombre.
Choisissez la couleur et l'opacité de l'ombre. Activez l'option inset pour une ombre intérieure.
Copiez le code CSS généré et collez-le directement dans votre feuille de style.
Questions fréquentes
- Qu'est-ce que la propriété CSS box-shadow ?
- box-shadow est une propriété CSS qui ajoute une ou plusieurs ombres portées autour d'un élément HTML. Sa syntaxe est : box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Elle est supportée par tous les navigateurs modernes sans préfixe.
- Quelle est la différence entre blur et spread ?
- Le blur (flou) rend les bords de l'ombre progressifs : plus la valeur est élevée, plus l'ombre est diffuse. Le spread (étendue) agrandit ou réduit la taille de l'ombre : une valeur positive agrandit l'ombre, une valeur négative la réduit. Combinés, ils permettent des effets très variés.
- Qu'est-ce qu'une ombre inset ?
- Le mot-clé inset transforme l'ombre extérieure en ombre intérieure. L'ombre est projetée à l'intérieur de l'élément, créant un effet d'enfoncement ou de creux. C'est utile pour les champs de formulaire, les boutons enfoncés ou les effets de profondeur.
- Peut-on ajouter plusieurs ombres à un même élément ?
- Oui. En CSS, vous pouvez combiner plusieurs ombres en les séparant par des virgules : box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Les ombres multiples permettent de créer des effets de profondeur plus réalistes.
- Mes données personnelles sont-elles protégées ?
- Entièrement. Le calcul est réalisé à 100 % côté client, directement dans votre navigateur web. Aucune donnée personnelle n'est envoyée vers un serveur distant ni stockée. Toutes les informations restent sur votre appareil.
Comprendre les ombres en CSS
Comment fonctionnent les ombres en CSS ?
CSS propose deux propriétés d'ombre : box-shadow pour les éléments de boîte et text-shadow pour le texte. box-shadow dessine une ombre qui suit la forme rectangulaire de l'élément (y compris les border-radius). Le navigateur calcule l'ombre en appliquant un décalage, un flou gaussien et une étendue à la forme de l'élément. L'ombre est rendue sous l'élément (ou à l'intérieur avec inset) et respecte l'ordre d'empilement (z-index).
Quelles sont les bonnes pratiques pour les ombres en web design ?
Les meilleures pratiques recommandent d'utiliser des ombres subtiles avec des couleurs semi-transparentes (rgba ou hsla) plutôt que du noir pur. Combinez plusieurs ombres de tailles différentes pour un effet plus naturel. Restez cohérent dans la direction de la lumière sur toute la page. Utilisez des ombres plus prononcées pour les éléments élevés (modals, dropdowns) et subtiles pour les éléments proches de la surface (cards, boutons).
Quelle est la différence entre box-shadow et filter: drop-shadow() ?
box-shadow dessine une ombre autour de la boîte rectangulaire de l'élément, tandis que filter: drop-shadow() suit la forme réelle de l'élément (y compris les zones transparentes d'une image PNG). drop-shadow est plus performant pour les animations car il utilise l'accélération GPU, mais il ne supporte pas les ombres multiples ni le spread. box-shadow offre plus de contrôle avec le spread et l'inset.