Générateur CSS Box Shadow — Neumorphisme, Glassmorphisme et Tailwind
Générateur CSS box shadow gratuit avec aperçu en temps réel. Créez des ombres, effets neumorphisme et glassmorphisme. Exportez en CSS, Tailwind ou variables CSS.
Mis à jour mai 2026
Vérifié par Rafael Duarte
box-shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15);
shadow-xl
--shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.15);
Shift+Entrée pour copier
Comment utiliser le générateur box-shadow CSS
Curseurs visuels, trois formats de sortie
1. Ajustez les curseurs
Décalage X, Décalage Y, Flou, Étendue et Opacité — l'aperçu se met à jour en temps réel.
2. Choisissez le mode ou un preset
Standard, Neumorphisme, Glassmorphisme — ou cliquez sur un preset prêt à l'emploi dans la galerie.
3. Copiez CSS, Tailwind ou variable
`Shift+Entrée` copie le CSS instantanément depuis n'importe quel endroit de l'outil.
Ce que fait cet outil
Trois styles dans un seul générateur
Neumorphisme automatique
Calcule les deux ombres opposées (highlight + creux) à partir de la couleur de fond choisie.
Glassmorphisme en contexte
Affiche l'aperçu sur un dégradé coloré, avec le préfixe -webkit- inclus pour Safari.
Export triple
CSS pur, classe Tailwind ou propriété personnalisée CSS — copiez le format utilisé par votre projet.
Presets Material Design
Élévations prêtes à l'emploi, ainsi que des ombres iOS, cartes discrètes et lueurs néon.
Aperçu sur 4 types d'éléments
Alternez entre carte, bouton, champ de saisie et cercle pour voir l'ombre appliquée sur différentes formes, avec un fond d'aperçu clair ou sombre.
Bibliothèque de 19 presets répartis en 7 catégories
Ouvrez la galerie complète dans une fenêtre modale et filtrez visuellement par catégorie — Material, iOS, Cards, Buttons, Glow et Inset.
Exemples de box-shadow
Quand vous allez utiliser cet outil
Les scénarios les plus courants chez les utilisateurs
Élévation façon Material Design
Superposez une ombre discrète et une ombre diffuse pour une profondeur réaliste.
Effet néon sur boutons et badges
Un décalage nul avec un flou élevé produit une lueur ambiante plutôt qu'une ombre directionnelle.
Soft UI (neumorphisme)
Cartes et boutons avec effet 3D plastique — alternez entre Plat, Pressé et Concave.
Cartes en verre dépoli
Glassmorphisme sur fond coloré ou image, avec le bon fallback pour Safari.
Comparer la même ombre sur différents éléments
Testez carte, bouton, champ de saisie et cercle côte à côte avant de décider quelle profondeur convient le mieux à votre design.
Valider l'ombre en mode sombre
Basculez l'aperçu sur fond sombre et vérifiez que l'ombre reste visible avant de déployer l'interface.
Erreurs courantes
Utiliser box-shadow au lieu de drop-shadow pour les icônes
box-shadow s'applique à la boîte rectangulaire ; drop-shadow suit la forme visuelle réelle, y compris un PNG transparent.
Oublier le préfixe -webkit-backdrop-filter
Sans lui, l'effet glassmorphisme disparaît sur iOS et macOS Safari.
Animer box-shadow directement au survol
Cela déclenche un repaint à chaque frame — animez plutôt opacity sur un pseudo-élément portant déjà l'ombre.
Neumorphisme avec un contraste trop faible
Le rendu doux du soft UI est séduisant mais peut devenir illisible. Vérifiez toujours le contraste du texte sur le fond neumorphique selon les critères WCAG avant de publier.
Modifier à la main la valeur arbitraire Tailwind
Les classes shadow-[...] exigent un underscore à la place de chaque espace. Copiez toujours via le bouton dédié — une modification manuelle casse la syntaxe JIT de Tailwind.
Pourquoi utiliser cet outil
Aucun autre générateur ne combine ombre standard, neumorphisme et glassmorphisme au même endroit — le mode Neu calcule automatiquement les deux ombres, un calcul qu'il faudrait faire à la main avec d'autres générateurs.
Le CSS généré est prêt pour la production, préfixes de compatibilité inclus (comme -webkit-backdrop-filter).
Vous testez la même ombre sur une carte, un bouton, un champ de saisie et un cercle, sur fond clair ou sombre, avant de décider quelle profondeur fonctionne — le tout dans le navigateur, sans rien installer et sans créer de compte.
box-shadow vs. filter: drop-shadow
Deux façons d'ombrer, des usages différents
Questions fréquentes
Elle ajoute un ou plusieurs effets d'ombre autour de la boîte d'un élément — décalage horizontal, vertical, flou, étendue et couleur. Plusieurs ombres se superposent en les séparant par des virgules.
Ressources
Outils connexes
- Vérificateur de Contraste de Couleurs Design Vérificateur de contraste de couleurs gratuit — vérifiez la conformité WCAG 2.2 AA et AAA instantanément. Aperçu en direct, simulation du daltonisme et...
- Convertisseur de Couleurs Design Convertissez des couleurs entre HEX, RVB, HSL et CMJN instantanément. Sélecteur de couleur gratuit avec vérificateur de contraste WCAG et générateur de palette.
- Générateur de Palette de Couleurs Design Générez des palettes de couleurs harmonieuses depuis n'importe quelle couleur de base. Choisissez Analogue, Complémentaire, Triadique ou Tétradique —...
- Palette de Couleurs depuis une Image Design Extrayez des palettes de couleurs de n'importe quelle image — obtenez des codes HEX, RGB, HSL et exportez en CSS variables, Tailwind, JSON ou PNG. 100% dans...
- Générateur CSS Flexbox Design Générateur CSS Flexbox gratuit : aperçu live, CSS et Tailwind simultanément, 10 layouts prédéfinis, avertissements contextuels et export React/JSX. Sans inscription.
