Générateur de box-shadow CSS — ombres multiples, néomorphisme et text-shadow
Créez des effets box-shadow et text-shadow en plusieurs couches avec aperçu en direct et préréglages élévation, néomorphisme et lueur, puis copiez le CSS.
box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.1);
shadow-[0_10px_30px_-6px_rgba(15,23,42,0.18),0_4px_10px_-4px_rgba(15,23,42,0.1)]
Fonctionne entièrement dans votre navigateur. Rien de ce que vous saisissez ne nous est envoyé ni n’est conservé. Parcourir tous les outils gratuits.
Un problème, ou quelque chose à améliorer ? Nous lisons chaque message et corrigeons vite.
Ce générateur de box-shadow CSS gratuit vous permet de concevoir des ombres à l’œil et de copier le CSS box-shadow ou text-shadow exact. Empilez autant de couches que nécessaire, chacune avec son propre décalage horizontal et vertical, son flou, son étendue, sa couleur, son opacité et son réglage inset, et observez-les sur une carte d’aperçu dont vous pouvez modifier le fond, la couleur et le rayon des coins pour qu’elle corresponde à votre design.
Une ombre réaliste ne tient presque jamais en une seule couche. Une ombre nette et proche associée à une ombre large et légère donne l’impression d’un objet soulevé de la page, et c’est ainsi que fonctionnent les niveaux d’élévation de Material Design ; le néomorphisme, lui, exige deux ombres opposées sur une carte de la même couleur que son fond. Les préréglages couvrent ces modèles, et les notes ci-dessous expliquent la syntaxe de box-shadow, pourquoi la superposition rend mieux et ce que les ombres coûtent en performances de rendu.
Mode d’emploi
- Choisissez Ombre de boîte ou Ombre de texte.
- Partez d’un préréglage, ou ajustez la couche sélectionnée avec les curseurs : décalages, flou, étendue, couleur, opacité et inset.
- Ajoutez des couches avec + Ajouter une couche (cela copie la couche sélectionnée), sélectionnez une couche dans la liste pour la modifier et réorganisez-les avec les flèches. La première couche est dessinée au-dessus.
- Adaptez l’aperçu à votre design : définissez le fond de la page, la couleur de la carte et le rayon des coins.
- Copiez le CSS, ou la classe Tailwind à valeur arbitraire.
Questions fréquentes
Que signifient les valeurs de box-shadow ?
box-shadow: inset? x-offset y-offset blur spread colour. Le décalage x déplace l’ombre vers la droite (négatif : vers la gauche), le décalage y la déplace vers le bas (négatif : vers le haut). Le flou (blur) définit la douceur du bord ; 0 donne un bord net. L’étendue (spread) agrandit l’ombre avant le flou (une valeur négative la réduit, ce qui évite qu’un grand flou dépasse sur les côtés). Inset dessine l’ombre à l’intérieur de l’élément au lieu de l’extérieur. Plusieurs ombres se séparent par des virgules, et la première est peinte au-dessus.
Comment créer une ombre douce et réaliste ?
Superposez deux ombres ou plus de faible opacité plutôt qu’une seule ombre sombre : une petite ombre serrée pour le bord de contact (0 1px 2px à environ 10 % de noir) et une plus grande et plus douce pour la lumière ambiante (0 8px 24px à 8 à 12 %). Utilisez une étendue légèrement négative sur la grande pour qu’elle reste sous l’élément. Teinter l’ombre avec une version foncée de la couleur de fond, plutôt qu’avec du noir pur, paraît aussi plus naturel sur des pages colorées.
Comment créer un effet de néomorphisme ?
Donnez à l’élément la même couleur de fond que son parent, puis ajoutez deux ombres : une plus foncée décalée vers le bas et la droite, et une plus claire (souvent blanche) décalée vers le haut et la gauche, par exemple 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5) sur #e0e5ec. Passez-les en inset pour un état enfoncé. Prudence pour les contrôles : les boutons néomorphiques ont un contraste très faible avec leur fond et échouent généralement à l’exigence WCAG de 3:1 pour les composants d’interface, sauf si vous ajoutez une bordure ou un contour plus marqué.
Quelle est la différence entre box-shadow et filter: drop-shadow() ?
box-shadow suit la boîte rectangulaire de l’élément, y compris son border-radius, et prend en charge spread et inset. filter: drop-shadow() suit les pixels visibles : il épouse donc le contour d’un PNG transparent, d’une icône SVG ou d’une forme découpée, mais n’a ni spread ni inset et n’accepte qu’une ombre par fonction. Utilisez box-shadow pour les cartes et les boutons, drop-shadow pour les images et icônes de forme irrégulière.
text-shadow peut-il avoir un spread ou un inset ?
Non. text-shadow ne prend que le décalage x, le décalage y, le flou et la couleur. Pour simuler un contour, empilez au moins quatre ombres nettes décalées de 1px dans chaque direction (le préréglage Contour), ou utilisez -webkit-text-stroke, désormais largement pris en charge. Une ombre de texte douce et peu opaque peut améliorer la lisibilité d’un texte blanc sur des photos, mais elle ne compte pas dans le calcul du contraste WCAG.
Les box-shadow nuisent-elles aux performances ?
Les ombres statiques ne coûtent presque rien. Les grands rayons de flou deviennent coûteux quand ils sont repeints à chaque image, par exemple en animant box-shadow au survol sur de nombreuses cartes. L’astuce classique consiste à placer l’ombre sur un pseudo-élément et à animer plutôt son opacité, que le navigateur peut composer sur le GPU sans repeindre le flou.
Élévation : une échelle d’ombres cohérente
Les design systems définissent une poignée de niveaux d’élévation et n’utilisent que ceux-là, pour que la « hauteur » d’un élément ait un sens : cartes au niveau 1, menus déroulants au 2 ou 3, boîtes de dialogue au 4 ou 5. Les préréglages Élévation suivent ce modèle, chacun associant une ombre serrée à une ombre plus large, les deux grandissant avec la hauteur.
• Niveau 1, cartes et éléments de liste au repos : 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24).
• Niveau 2, cartes surélevées et éléments survolés : 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12).
• Niveau 3, menus déroulants et popovers : 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1).
• Niveaux 4 et 5, fenêtres modales et boîtes de dialogue : décalages et flous plus grands, toujours sous 20 % d’opacité.
Stockez les niveaux dans des propriétés personnalisées CSS (--shadow-1 à --shadow-5) ou dans votre thème Tailwind plutôt que de coller les valeurs dans les composants, pour pouvoir ajuster l’échelle à un seul endroit.
Les ombres en mode sombre
Une ombre noire sur un fond presque noir est invisible : les interfaces sombres montrent donc l’élévation autrement. Les surfaces plus hautes reçoivent des couleurs de fond légèrement plus claires, et les ombres, si on les garde, deviennent plus grandes et plus opaques. Une fine bordure claire de 1px ou un reflet intérieur (inset 0 1px 0 rgba(255,255,255,0.06)) se lit souvent mieux que n’importe quelle ombre extérieure. Les lueurs, comme le préréglage Lueur, fonctionnent sur fond sombre parce qu’elles ajoutent de la lumière au lieu d’en retirer ; réservez-les aux états de focus et aux mises en avant, pas à chaque carte.
Outils gratuits similaires
- Générateur de dégradés CSS — Créez des dégradés linéaires, radiaux et coniques avec des arrêts de couleur déplaçables, un cadran d’angle et des préréglages. Copiez le CSS ou une classe Tailwind.
- Générateur de palette de couleurs — Appuyez sur la barre d’espace pour une nouvelle palette, verrouillez les couleurs qui vous plaisent, choisissez une harmonie ou tirez la palette d’une photo. Export en CSS, Tailwind, SCSS, JSON ou PNG.
- Vérificateur de contraste — Vérifiez les couleurs du texte et du fond selon WCAG 2.x AA et AAA, consultez la valeur APCA Lc et obtenez la couleur la plus proche qui passe.
- Sélecteur et convertisseur de couleurs — Prélevez n’importe quelle couleur sur votre écran, ou convertissez instantanément entre HEX, RGB et HSL.