Palette d'Ombres CSS & Élévation
Systèmes de Design & Moteur d'Élévation Tailwind

Générateur de Palette d'Ombres Multicouches & Élévation CSS

Concevez des ombres portées multicouches fluides et modernes avec niveaux d'élévation personnalisés, diffusion de lumière ambiante, lueurs teintées et classes Tailwind.

100% Confidentialité Côté Client
Compatible W3C CSS & DTCG
Préréglages :
Physique des Ombres & Moteur d'Élévation
Inspecter le Palier d'ÉlévationAffichage des 6 Paliers
4 couches
2 (Rapide)4 (Équilibré)6 (Ultra-Fluide)
90°
0° Droite90° Lumière du Jour180° Gauche270° Éclairage Bas
40px
16px (Subtil)40px (Standard)80px (Dramatique)
1.5x
0.5x (Net)1.5x (Naturel)3.0x (Lueur Diffuse)
-2px
-8px (Ultra-Net)-2px (SaaS Moderne)+4px (Expansion Argile)
16%
5% (Subtil)16% (Standard)50% (Contraste Élevé)
#0F172A
Équilibre Lumière Ambiante45%
Lumière Directe FocaliséeLueur Ambiante Diffuse
Paliers : 6•Micro-Couches : 24•Azimut : 90°
#0f172a (16%)
Fond :
Forme :
xs3px élévation

Micro-Élévation

Bordures subtiles, accents de badges et surlignage de lignes de tableau

4 couches
sm8px élévation

État de Repos

Boutons, champs de formulaire et cartes au repos

4 couches
md14px élévation

Élévation Interactive

États de survol, infobulles flottantes et panneaux actifs

4 couches
lg22px élévation

Élément Flottant

Menus déroulants, calques de sélection et boutons d'action flottants

4 couches
xl30px élévation

Modale Superposée

Boîtes de dialogue, tiroirs coulissants et alertes critiques

4 couches
2xl40px élévation

Flottement Hero

Fenêtres de bienvenue, galeries lightbox et modales de premier plan

4 couches
Format : preview•1529 Octets
Normes : Spécification CSS Niveau 3 • WebKit / Blink / Gecko
Hiérarchie d'Élévation
6 Paliers Distincts
24 Total des Micro-Couches Calculées
Vecteur Lumineux & Flou
Azimut : 90° • 1.5x Diffusion
Décalage de Dispersion -2px • Exp de Décroissance 1.5
Export de Jetons Design
Prêt pour Tailwind & DTCG
Zéro Banding • AST 100% dans le Navigateur

Simulation Physique 100% Côté Client

Calcul vectoriel de lumière et décroissance exponentielle du flou exécutés instantanément dans votre navigateur.

Élimination des Bandes par Multicouches

Transforme les ombres brutes ordinaires en dégradés atmosphériques soyeux avec dispersion négative pour des bords nets.

Tokenisation Universelle pour Design Systems

Génère des jetons d'élévation prêts pour Tailwind CSS v3/v4, variables CSS natives et fichiers JSON Style Dictionary.

Référence technique et guide d'architecture

Guide de Développement : Générateur de Palettes Box-Shadow Multicouches & Élévation CSS — Guide de référence

Concevez des ombres portées multicouches fluides et modernes avec niveaux d'élévation personnalisés, diffusion de lumière ambiante, lueurs teintées et classes Tailwind.

Paramètres clés et contrôles

layersnumber

Nombre total de couches d'ombre (généralement de 2 à 6) superposées pour simuler une diffusion lumineuse et une pénombre réalistes.

Par défaut : 4
elevationnumber | string

Distance virtuelle sur l'axe Z par rapport à la surface, servant de multiplicateur global pour le décalage vertical et le rayon de flou.

Par défaut : 16px
shadowColorstring (hex | rgba | hsl)

Couleur de base et opacité utilisées pour les couches d'ombres ambiantes et directionnelles. Compatible avec les teintes personnalisées du design system.

Par défaut : rgba(15, 23, 42, 0.08)
spreadnumber (px)

Modificateur de rayon de propagation (spread) appliqué progressivement pour ajuster l'emprise de chaque couche par rapport aux contours de la boîte.

Par défaut : -2px
diffusionCurvestring (linear | exponential | custom-ease)

Courbe de progression mathématique régissant l'expansion exponentielle du flou et l'atténuation du canal alpha à travers les couches successives.

Par défaut : exponential

Conseils de pro et bonnes practices

Évitez d'appliquer du noir pur 'rgba

Évitez d'appliquer du noir pur 'rgba(0, 0, 0, 0.2)' sur des arrière-plans clairs ou colorés. Teintez les ombres avec la couleur de la surface sous-jacente — comme un bleu ardoise profond 'rgba(15, 23, 42, 0.08)' — pour créer une profondeur éclatante et naturelle.

Associez une couche fine et nette avec

Associez une couche fine et nette avec un flou minimal pour marquer le point de contact au sol à 3 ou 4 couches larges et très transparentes pour la diffusion ambiante, éliminant ainsi toute bordure artificielle.

Animer directement la propriété

Animer directement la propriété 'box-shadow' déclenche des recalculs de rendu CPU (repaint) à chaque image. Placez plutôt l'ombre de niveau supérieur sur un pseudo-élément '::after' et animez sa propriété 'opacity' via le GPU.

En mode sombre

En mode sombre, les ombres noires ne créent aucun contraste sur les fonds foncés. Adoptez les recommandations de Material Design : éclaircissez progressivement la teinte de surface des cartes et ajoutez de légers halos lumineux ambiants.

Pièges courants et dépannage

Effet de bandes (banding) et transitions saccadées entre les couches d'ombres

Augmentez le nombre de couches à 4 ou 5 et réduisez l'incrément d'opacité alpha. Assurez-vous que les rayons de flou suivent une progression exponentielle (ex. 1px, 3px, 8px, 18px, 36px) plutôt que linéaire.

Les ombres sont brutalement tronquées au bord du conteneur parent

Un conteneur parent configuré avec 'overflow: hidden' coupe les ombres débordantes. Remplacez-le par 'overflow: clip' associé à un padding adéquat, ou appliquez l'ombre sur un élément frère ou un pseudo-élément.

Baisse du taux de rafraîchissement (FPS) lors du défilement de longues listes de cartes ombrées

Une profusion d'ombres multicouches dans une liste virtuelle sature le moteur de tramage du navigateur. Limitez les cartes répétitives à 2 ou 3 couches et réservez les ombres à 5 couches et plus pour les fenêtres modales et menus surgissants.

Foire aux questions (FAQ)

Pourquoi les ombres CSS multicouches sont-elles supérieures aux ombres simples traditionnelles ?▼

Une source lumineuse naturelle ne génère jamais un flou uniforme. Une ombre réelle comporte un cœur dense (ombre) et une zone périphérique douce et diffuse (pénombre). Une ombre CSS unique paraît plate et synthétique, tandis qu'empiler 3 à 6 couches restitue fidèlement la décroissance physique de la lumière en carré inverse.

Comment intégrer les palettes d'ombres générées dans un projet Tailwind CSS ?▼

Copiez la chaîne de valeurs d'ombres séparées par des virgules dans votre fichier 'tailwind.config.js' sous 'theme.extend.boxShadow', ou déclarez des variables CSS personnalisées telles que '--elevation-3' dans votre feuille de styles globale et utilisez la classe 'shadow-[var(--elevation-3)]'.

L'empilement de 5 ou 6 couches d'ombre nuit-il aux performances d'affichage du navigateur ?▼

Sur des éléments statiques, le navigateur met en cache l'ombre dans la couche de composition lors du rendu initial avec un impact négligeable. La baisse de performance n'intervient que lors de transformations ou redimensionnements continus, ce qui se contourne via des transitions d'opacité sur pseudo-éléments.

Comment structurer une échelle d'élévation normalisée dans un Design System ?▼

Définissez des tokens sémantiques par niveau d'élévation (ex. : elevation-low pour les boutons, elevation-mid pour les cartes, elevation-high pour les menus déroulants et elevation-overlay pour les fenêtres modales). Veillez à ce que l'angle de la lumière et la teinte d'ambiance restent rigoureusement identiques sur l'ensemble des tokens.

Outils et utilitaires connexes

Tous les outils →
Guide de Référence des Dégradés CSSDesign

Référence technique exhaustive pour les dégradés CSS linéaires, radiaux et coniques. Couvre la double position, l'interpolation OKLCH, le découpage de texte et l'export Tailwind CSS.

Ouvrir l'outil→
Référence développeur SVG OptimizerDesign

Utilitaire d'optimisation SVG côté client pour minifier le code XML, ajuster la précision des chemins, purger les métadonnées et assainir le XSS.

Ouvrir l'outil→
Référence Développeur Nuancier de CouleursDesign

Outil pour développeurs dédié à la génération de palettes, l'audit de contraste WCAG, la simulation de daltonisme et l'exportation de tokens.

Ouvrir l'outil→
Référence Développeur CSS GlassmorphismDesign

Utilitaire et guide d'architecture CSS pour le glassmorphism, filtres backdrop, reflets spéculaires et interfaces en verre dépoli accélérées par GPU.

Ouvrir l'outil→
Calculateur de Ratio d'Aspect RéférenceDesign

Utilitaire pour développeurs permettant de calculer les ratios d'aspect, redimensionner les résolutions, inspecter les fichiers multimédias et aligner les codecs vidéo.

Ouvrir l'outil→
Générateur de Favicon & Icônes d'Application CheatsheetDesign

Aide-mémoire technique complet pour créer des favicons de navigateurs, icônes Apple Touch, manifestes PWA et balises d'intégration HTML.

Ouvrir l'outil→