Générateur d'ombre CSS – Box-shadow presets modernes + copie du code
Générez des ombres CSS modernes avec aperçu en direct, préréglages et copie du code box-shadow.
Soutenez le projet
J’ai choisi de limiter les publicités pour garder l’expérience simple et agréable. Si cet outil vous a été utile, vous pouvez m’aider à le faire vivre — chaque geste compte pour un développeur solo.
Description
Générateur d’ombres CSS (box-shadow) gratuit et sans inscription. Créez des ombres modernes pour cartes, modales, boutons ou effets neumorphism avec un aperçu en direct. Ajustez le décalage (X, Y), le flou, l’étendue, la couleur et l’opacité, combinez jusqu’à 4 couches, ou appliquez l’un des 40 préréglages en un clic. Copiez le code CSS prêt à l’emploi.
Qu’est-ce que box-shadow ?
La propriété CSS box-shadow ajoute une ou plusieurs ombres à un élément. Chaque ombre est définie par : décalage horizontal (X), décalage vertical (Y), rayon de flou, étendue (spread), couleur et option inset (ombre intérieure). Les ombres multiples sont séparées par des virgules et se superposent dans l’ordre. box-shadow ne modifie pas la taille du layout (contrairement à une bordure).
Comment faire
- Aperçu : La carte à gauche reflète en direct l’ombre générée. Changez le fond (clair, sombre, dégradé), la couleur de la carte et le rayon des bords pour mieux juger du rendu.
- Contrôles : Réglez X et Y (décalage en px), le flou, l’étendue, la couleur (hex) et l’opacité. Cochez « Inset » pour une ombre intérieure.
- Plusieurs couches : Activez « Plusieurs couches d’ombre » pour ajouter jusqu’à 4 couches, réordonnez-les ou supprimez-en. Chaque couche a ses propres paramètres.
- Préréglages : Cliquez sur une des 40 cartes pour appliquer instantanément son ombre. Vous pouvez ensuite la modifier avec les contrôles.
- Copier le CSS : Cliquez sur « Copier le CSS » pour copier la déclaration
box-shadow: ...;dans le presse-papiers. - Réinitialiser : Remet une seule couche par défaut et efface le préréglage éventuel.
Exemples
- Carte légère : Décalage Y 12 px, flou 24 px, opacité 12 % — idéal pour des cartes de contenu.
- Bouton au survol : Y 6 px, flou 16 px, opacité 16 % — effet de soulèvement au hover.
- Neumorphism : Deux couches, une ombre foncée et une claire en décalage opposé (ex. 8px 8px / -8px -8px) pour un effet « pressé » ou « relief ».
- Glow coloré : Une fine bordure (spread 1px) + un flou important avec une couleur (bleu, violet, etc.) pour un halo.
Cas d’usage
- Cartes et panneaux : Ombres douces (Material, Soft Lift, Subtle Card) pour hiérarchiser le contenu.
- Modales et overlays : Ombres plus marquées (Modal Soft, Floating) pour détacher la fenêtre du fond.
- Boutons : Ombres légères au repos, plus marquées au hover (Button Hover), inset au clic (Button Pressed).
- Neumorphism : Préréglages Neumorph Light, Soft, Pressed ou Subtle pour un style « soft UI ».
- Composants avec halo : Glow Blue, Purple, Pink, etc. pour des focus ou des éléments mis en avant.
- Dropdowns et menus : Outline Shadow, Dropdown pour un léger contour et une profondeur.
Limites et bonnes pratiques
- Performance : Évitez un nombre excessif d’ombres ou des flous très grands sur de nombreux éléments ; préférez des ombres simples sur les listes longues.
- Accessibilité : L’ombre ne remplace pas un indicateur de focus visible (outline ou border) pour la navigation au clavier.
- Contraste : Sur fond sombre, utilisez des opacités plus faibles pour garder un rendu naturel.
- Compatibilité : box-shadow est supportée par tous les navigateurs modernes ; pour IE9 et antérieurs, une solution de repli (border ou image) peut être nécessaire.
Différence entre flou et étendue
Le flou (blur) définit à quel point l’ombre est diffuse : 0 donne une ombre nette, une valeur élevée un halo doux. L’étendue (spread) agrandit ou rétrécit la forme de l’ombre avant d’appliquer le flou : positive = ombre plus grande, négative = ombre plus petite que l’élément. En pratique, le flou influence surtout la « douceur », l’étendue la « taille » de l’ombre.
Alternatives et outils complémentaires
- Tailwind CSS : Classes prédéfinies (
shadow-sm,shadow-lg, etc.) ; pour des ombres personnalisées, utilisez une classe arbitraireshadow-[...]avec la valeur générée ici. - Convertisseur de couleurs : Pour obtenir une couleur en hex à partir de RGB ou HSL avant de l’utiliser dans l’ombre.
- Générateurs de dégradés : Utiles pour les fonds sur lesquels vos éléments avec box-shadow seront affichés.
FAQ
Qu’est-ce que box-shadow ?
box-shadow est une propriété CSS qui ajoute une ou plusieurs ombres à une boîte. On définit le décalage (X, Y), le flou, l’étendue, la couleur et éventuellement « inset » pour une ombre intérieure. Elle n’occupe pas d’espace dans le layout.
Comment créer des ombres douces ?
Utilisez un flou (blur) moyen à élevé (par ex. 20–40 px) et une opacité faible (10–20 %). Un décalage Y positif modéré (8–16 px) donne un effet de légère élévation. Les préréglages « Soft Lift », « Soft Ambient » ou « Subtle Card » en sont des exemples.
Quelle est la différence entre flou et étendue ?
Le flou rend les bords de l’ombre plus ou moins diffus. L’étendue agrandit (valeur positive) ou rétrécit (valeur négative) la forme de l’ombre avant le flou. Flou = douceur ; étendue = taille de l’ombre.
Puis-je utiliser plusieurs ombres sur un même élément ?
Oui. En CSS, on liste plusieurs valeurs séparées par des virgules : box-shadow: ombre1, ombre2, ...;. L’outil permet jusqu’à 4 couches. Les préréglages « Crisp Card », « Material » ou « Inset + Outer » en utilisent déjà deux.
Que signifie « Inset » ?
Une ombre inset est dessinée à l’intérieur de l’élément, comme si la lumière venait de l’extérieur et créait une dépression. Utile pour des boutons « enfoncés », des champs de formulaire ou des effets neumorphism « pressés ».
Le code généré fonctionne-t-il avec Tailwind ?
Tailwind propose des classes comme shadow-md ou shadow-xl. Pour la valeur exacte générée ici, utilisez une classe arbitraire : shadow-[0_12px_24px_0_rgba(0,0,0,0.12)] (avec des underscores à la place des espaces). Notre outil fournit la valeur prête à copier.
Une suggestion ou une demande d'outil ?
Vous avez repéré une erreur, vous souhaitez un nouvel outil ou vous avez un retour à partager ? Contactez-moi par email, je serais ravi d'échanger avec vous.