Générateur d'Ombres CSS

Générateur d'Ombres CSS & Ombres Douces

Générez des ombres portées CSS multicouches et une élévation fluide réaliste. Ajustez le décalage, le flou, la diffusion, le biseau intérieur et exportez des tokens d'ombre CSS ou Tailwind.

Sélection rapide

Progression harmonique

Angle de la lumière (90°)
Orientation lumineuse
Nombre de couches:
Distance d'élévation50px
Flou maximal80px
Diffusion-5px
Opacité25%
Ratio d'ombre de contact60%
Chrominance & TeinteNeutral
Bordure subpixel
Courbe d'atténuationCourbe cubique
État de l'empilement: 6 / 6 couchesBac à sable local isolé
Élément cible:
Arrière-plan:
NouveauSample card version

Composant Carte UI

Composant d'interface interactif illustrant la diffusion lumineuse et l'élévation en temps réel.

49 €
Indice de performance:Coût élevé(180px Noyau de flou cumulé)
Couches actives: 6 / 6|Bac à sable local isolé
Couches actives
6 / Max layers count
Superposition optique
Flou cumulé
180px
Dispersion maximale
Indice de rastérisation
60 FPS Accélération GPU fluide
Charge GPU estimée

Traitement 100 % côté client

Calculs haute performance exécutés intégralement dans la mémoire de votre navigateur.

Zéro transmission serveur

Toutes les données restent strictement locales, sans aucune transmission vers des serveurs externes.

Export prêt pour la production

Code épuré et formats optimisés, prêts pour un déploiement immédiat en production.

ToolsAA•Utilitaires web 100% privés côté client
Référence technique et guide d'architecture

Générateur Box Shadow & Ombres CSS — Guide de référence

Générez des ombres portées CSS multicouches et des élévations douces réalistes. Ajustez décalage, flou, étalement, lueur interne et exportez en CSS ou Tailwind.

Générateur Box Shadow & Ombres CSS — Guide de référence — Architecture en mémoire côté client et flux de données
Générateur Box Shadow & Ombres CSS — Guide de référence — Architecture en mémoire côté client et flux de données

Paramètres clés et contrôles

offset-x (Déplacement horizontal)Longueur (px)

Définit le déplacement cartésien horizontal de l'ombre par rapport à la boîte de l'élément. Une valeur positive projette l'ombre vers la droite ; une valeur négative la projette vers la gauche. Dans les modèles d'éclairage multicouches, offset-x est calculé selon dx = distance * cos(theta), où theta représente l'angle d'incidence de la source lumineuse.

Par défaut : 0px
offset-y (Déplacement vertical)Longueur (px)

Définit le déplacement cartésien vertical de l'ombre. Une valeur positive projette l'ombre vers le bas (reproduisant un éclairage zénithal naturel ou un luminaire de plafond) ; une valeur négative la projette vers le haut. Les modèles physiques d'élévation adaptent offset-y proportionnellement à la hauteur perçue sur l'axe Z.

Par défaut : 4px
blur-radius (Dispersion gaussienne)Longueur (px)

Définit le paramètre d'écart-type du noyau de filtre de flou gaussien appliqué au contour de l'ombre (sigma = flou / 2). Un rayon de flou de 0 produit une silhouette nette et tranchée ; les valeurs supérieures à 0 créent un dégradé de pénombre diffus. Les valeurs supérieures à 64px peuvent provoquer des goulots d'étranglement de rastérisation GPU sur les appareils mobiles modestes.

Par défaut : 12px
spread-radius (Dilatation / Contraction du contour)Longueur (px)

Étend ou réduit la géométrie de l'ombre dans les quatre directions avant la rastérisation du flou gaussien. Une valeur positive dilate le contour de l'ombre vers l'extérieur ; une valeur négative le rétracte vers l'intérieur, une technique essentielle pour les ombres multicouches afin d'éviter les débordements latéraux tout en maintenant un ancrage vertical profond.

Par défaut : -2px
color & alpha (Absorption chromatique et opacité)Couleur (HEX / RGBA / OKLCH)

Définit la couleur spectrale et l'opacité de l'ombre portée. Un noir pur (rgba(0, 0, 0, alpha)) traduit une absorption non calibrée, produisant des liserés grisâtres et ternes sur des fonds colorés. Les jetons de design professionnels privilégient des teintes nuancées (ex. bleu marine profond pour les surfaces froides ou terre d'ombre brûlée sombre pour les surfaces chaudes) calibrées entre 4 % et 25 % d'alpha.

Par défaut : rgba(0, 0, 0, 0.08)
inset (Incrustation de surface interne)Indicateur (Mot-clé)

Lorsqu'il est présent, inverse le vecteur de projection pour afficher l'ombre à l'intérieur de la boîte de bordure (border-box) au lieu de la projeter vers l'extérieur. Les ombres intérieures simulent des cavités gravées, des découpes concaves, des reflets de biseau interne et des états de bouton enfoncé, rognées avec précision par la courbure du border-radius.

Par défaut : false (externe)
harmonic falloff curve (Atténuation harmonique inter-couches)Exposant mathématique (k)

L'exposant polynomial ou de loi de puissance (généralement k = 1,8 à 2,4) régissant la progression des distances de déplacement, des rayons de flou gaussien et de l'opacité alpha à travers les couches successives d'une pile multicouche. Évite les paliers linéaires artificiels et reproduit la dissipation optique réaliste selon la loi en carré inverse.

Par défaut : 2.0 (quadratique)

Conseils de pro et bonnes pratiques

Un rayon d'étalement négatif élimine les débordements latéraux sur les cartes

Lors de l'application de fortes ombres verticales (ex. offset-y: 20px, blur: 25px), le flou gaussien déborde automatiquement de façon horizontale à gauche et à droite, créant un effet boursouflé peu naturel. En introduisant un rayon d'étalement (spread-radius) négatif équivalant à environ 20 % à 40 % du décalage vertical (ex. spread: -6px), vous resserrez les côtés latéraux tout en conservant un ancrage vertical marqué, produisant une élévation nette et élégante.

Animez l'opacité d'un pseudo-élément plutôt que box-shadow pour garantir 60 fps

Créer une transition ou une animation directe sur la propriété CSS box-shadow force le moteur de rendu du navigateur à recalculer de lourds noyaux de flou gaussien multipasse sur les couches de peinture du CPU et du GPU à chaque image, provoquant des saccades et des pertes de fluidité au survol. Déclarez plutôt l'ombre surélevée sur un pseudo-élément ::after avec opacity: 0 et will-change: opacity, puis animez uniquement opacity: 1 avec un transform: translateY(-2px) accéléré par le matériel pour des transitions ultra-fluides à 120 fps gérées par le compositeur GPU.

Évitez les contours grisâtres en teintant l'ombre selon la tonalité du fond

L'utilisation d'ombres noires neutres (rgba(0, 0, 0, 0.15)) sur des surfaces colorées telles qu'un ambre chaud, un vert émeraude ou un saphir profond génère des halos grisâtres et désaturés autour du flou en raison du mélange gamma sRGB. Pour obtenir une profondeur haut de gamme et lumineuse, calculez la nuance de l'ombre en décalant la teinte de l'arrière-plan de 10° à 20° vers une tonalité froide complémentaire, en augmentant la saturation de 15 % et en réduisant la luminosité entre 8 % et 15 %.

Pièges courants et dépannage

⚠️L'ombre portée est rognée ou totalement invisible autour du périmètre de la carte

Si un conteneur parent possède overflow: hidden ou overflow: auto, toute valeur de box-shadow dépassant du rectangle englobant du conteneur sera immédiatement tronquée. Corrigez cela en ajoutant un padding suffisant au conteneur parent (au moins égal à blur + offset-y), en supprimant overflow: hidden, ou en appliquant l'ombre sur un div d'encapsulation distinct placé en dehors du conteneur de défilement.

⚠️L'ombre multicouche provoque des chutes de framerate et sature la mémoire GPU au défilement

Superposer plus de 6 couches d'ombres complexes avec des rayons de flou supérieurs à 60px consomme énormément de mémoire cache de tuiles GPU, en particulier sur les écrans Retina haute densité. Optimisez en réduisant le nombre de couches à 3 ou 4 strates harmoniques bien calibrées, en limitant le flou maximal à 40px, et en ajoutant contain: paint ou will-change: transform pour isoler la carte sur sa propre couche de composition matérielle.

⚠️Des crénelages en escalier ou des défauts d'anticrénelage apparaissent sur les coins arrondis sous Safari WebKit

WebKit présente un bogue documenté d'anticrénelage sous-pixel lors du rendu combiné d'un border-radius externe et d'ombres intérieures inset. Résolvez ce problème en déclarant explicitement -webkit-mask-image: -webkit-radial-gradient(white, black), en ajoutant transform: translateZ(0), et en veillant à ce que les valeurs de border-radius utilisent des entiers en pixels plutôt que des décimales fractionnaires en rem.

⚠️L'ombre portée ne suit pas la silhouette transparente d'une icône PNG ou SVG

La propriété CSS box-shadow calcule sa projection exclusivement d'après le rectangle de bordure (border-box) et la courbure du border-radius de l'élément, ignorant totalement les pixels transparents internes. Pour projeter une ombre épousant fidèlement les contours découpés d'un PNG transparent ou les tracés vectoriels SVG, remplacez box-shadow par la propriété CSS filter: drop-shadow(x y blur color), en notant que filter: drop-shadow n'accepte ni l'argument d'étalement (spread) ni le mot-clé inset.

Foire aux questions (FAQ)

Pourquoi les ombres CSS multicouches sont-elles plus réalistes que les ombres simples ?▼

Les ombres portées CSS monocouches reposent sur un flou gaussien linéaire uniforme incapable de reproduire l'optique du monde réel. Dans un environnement physique, un objet éclairé projette deux zones d'ombre distinctes : une ombre de contact sombre et nette située directement sous la base (occlusion ambiante) et une pénombre large, douce et faiblement contrastée qui se diffuse vers l'extérieur. La superposition de 3 à 6 couches de box-shadow avec des atténuations exponentielles de distance et de flou (ex. y_i = d * (i/n)^2.2, blur_i = b * (i/n)^2.0, alpha_i = alpha_max * e^(-0.6i)) reproduit fidèlement à la fois l'occlusion ambiante et la dissipation volumétrique de la lumière.

Quelle est la différence entre CSS box-shadow et filter: drop-shadow() ?▼

La propriété CSS box-shadow s'applique rigoureusement à la boîte de bordure (border-box, arrondis inclus) de l'élément, sans tenir compte des transparences internes ni des pseudo-éléments. À l'inverse, filter: drop-shadow() analyse le masque du canal alpha réel des pixels affichés, projetant l'ombre autour des contours des images PNG transparentes, des tracés SVG intégrés et des formes découpées via CSS clip-path. Néanmoins, filter: drop-shadow() ne prend pas en charge le paramètre spread-radius ni le mot-clé inset, et l'accumulation de plusieurs filtres drop-shadow entraîne une charge de composition GPU nettement plus lourde.

Comment éviter les ombres grisâtres et ternes sur fond coloré en CSS ?▼

Les ombres en noir pur (rgba(0, 0, 0, 0.15)) projetées sur des surfaces non neutres créent une bordure grise terne et délavée, car le mélange alpha en espace sRGB affaiblit la chromaticité de l'arrière-plan. Pour concevoir des ombres riches et éclatantes, prélevez la teinte de l'arrière-plan, décalez-la de 10° à 20° vers une nuance complémentaire plus profonde (par exemple, décalez un fond orange vers une terre d'ombre rougeâtre, ou un fond bleu vers un bleu nuit profond), augmentez la saturation de 15 % à 30 %, puis réduisez la luminosité entre 10 % et 20 %. En CSS moderne, ce calcul s'automatise élégamment via color-mix(in oklch, var(--bg-color), black 80%).

Comment optimiser les animations de box-shadow pour atteindre 60 fps sans surcharge GPU ?▼

N'animez jamais directement la propriété box-shadow : cela contraint le processeur et la carte graphique à recalculer de lourdes matrices de flou gaussien à chaque image (déclenchant les étapes coûteuses de Paint et de Composite). Préférez le rendu d'un pseudo-élément ::after persistant intégrant l'ombre surélevée précalculée, appliquez-lui opacity: 0 à l'état initial, puis animez uniquement son opacité et un transform: translateY(-2px) au :hover ou au :focus. Comme opacity et transform s'exécutent intégralement sur le thread de composition GPU sans recalcul de mise en page ni de peinture, l'animation conserve une fluidité constante à 60 ou 120 fps sans perte d'images.

Quelle est l'échelle d'élévation d'ombre idéale pour un design system ?▼

Les design systems de référence (comme Material Design, Tailwind CSS ou Apple HIG) structurent leurs ombres selon une hiérarchie d'élévation sur l'axe Z en 5 ou 6 paliers : Élévation 1 (Carte/Bouton au repos : décalage Y de 1 à 2px, flou de 3 à 4px, opacité de 5 à 8 % pour une séparation subtile), Élévation 2 (Survol de carte/Bouton surélevé : décalage Y de 4 à 6px, flou de 8 à 12px, opacité de 10 à 12 %), Élévation 3 (Menu déroulant/Popover : décalage Y de 8 à 12px, flou de 16 à 24px, opacité de 12 à 15 %), Élévation 4 (Fenêtre modale/Tiroir : décalage Y de 16 à 24px, flou de 32 à 48px, opacité de 15 à 20 %) et Élévation 5 (Notification toast/Alerte système flottante : décalage Y de 24 à 32px, flou de 48 à 64px, opacité de 20 à 25 % avec lueur périphérique ambiante).

La propriété CSS box-shadow affecte-t-elle la mise en page ou déclenche-t-elle un reflow ?▼

Non, la propriété box-shadow n'affecte en rien la mise en page du document, n'augmente pas les dimensions du rectangle englobant de l'élément et ne déclenche aucun recalcul de disposition (reflow) du DOM lors de son application ou de sa modification. En revanche, comme les ombres portées sont rendues en dehors du modèle de boîte, des rayons de flou ou d'étalement très élevés chevaucheront les éléments adjacents, risquant de masquer du texte ou de provoquer des barres de défilement horizontal si l'ombre dépasse la largeur du viewport (sauf si elle est contenue par overflow: hidden).

Outils et utilitaires connexes

Tous les outils →
Générateur CSS Clip-Path & FormesDesign

Générez des formes polygonales CSS clip-path avec poignées interactives. Copiez le code CSS multi-navigateurs, les masques SVG et les coordonnées réactives en pourcentages.

Ouvrir l'outil→
Extracteur de palette d'image & nuancierDesign

Extrayez instantanément les palettes de couleurs de vos images. Générez des nuanciers dominants en HEX, RGB et HSL, exportez vos tokens CSS ou Tailwind et testez le contraste d'accessibilité WCAG.

Ouvrir l'outil→
Calculateur Nombre d'Or & Rectangle d'OrDesign

Calculez instantanément les dimensions du nombre d'or et les proportions du rectangle d'or. Divisez les longueurs par phi (1,618), adaptez la typographie et générez des grilles réactives.

Ouvrir l'outil→
Générateur Neumorphisme CSS & Soft UIDesign

Générez des ombres portées CSS en neumorphisme et soft UI avec surfaces extrudées, en creux, plates ou concaves. Copiez instantanément du code CSS, Tailwind, SCSS ou SVG.

Ouvrir l'outil→
Générateur de Palette & HarmoniesDesign

Générez instantanément des harmonies de couleurs équilibrées. Créez des palettes complémentaires, analogues ou triadiques avec audit de contraste WCAG et export CSS.

Ouvrir l'outil→
Générateur Glassmorphism & Verre DépoliDesign

Générez du code CSS moderne de glassmorphism et verre dépoli avec réglages en direct du flou backdrop-filter, opacité, bordure et ombres. Copiez instantanément du code HTML et CSS propre.

Ouvrir l'outil→