Go Toolstack

Générateur d'Ombres Portées CSS (Box Shadow)

Concevez des ombres modernes et multicouches avec prévisualisation et code CSS.

Générateur d'Ombres Portées CSS (Box Shadow)

Concevez des ombres modernes et multicouches avec prévisualisation et code CSS.

Comment ça fonctionne

1
Set Criteria & Options
Select length, format, or generation parameters for your output.
2
Generate Instantly
Generate secure, random, or custom data entirely in your browser.
3
Copy or Export
Copy the generated output to your clipboard or download the file.

Découvrez d'autres utilitaires côté client dans cette catégorie

Pôle Images & Design • Flux de travail et guide de comparaison

Découvrez tous les outils de images & design, les limites techniques et le guide de sélection.

Explorer le pôle →
Formateur & Validateur JSON

Formatez, compressez et validez vos données JSON avec précision 64 bits et règles JSON Schema (Draft-07 / 2020-12).
Encodeur & Décodeur Base64

Convertissez du texte en Base64 et décodez instantanément vos chaînes.
Formateur & Embellisseur SQL

Formatez et indentez vos requêtes SQL complexes selon les standards.

Guides de blog associés

Guides techniques, dépannage et tutoriels de bonnes pratiques

Centre d'Expertise & Architecture Technique

Générateur d'Ombres CSS (box-shadow), Ombres Portées & Effet Inset

La conception d'ombres portées et de volumes d'interface utilisateur en CSS moderne s'appuie sur la propriété standard box-shadow (et text-shadow pour la typographie). La maîtrise précise du décalage horizontal (X), du décalage vertical (Y), du rayon de flou (blur), du rayon d'étalement (spread) et de la transparence de couleur RGBA est essentielle pour bâtir des interfaces ergonomiques inspirées du Neumorphisme, du Glassmorphism ou des principes de hiérarchie visuelle du Material Design sans surcharger visuellement les pages.

Un designer UI élabore un composant de carte interactive avec effet d'élévation naturelle au survol. Dans l'atelier visuel, il configure une ombre douce à multiples couches combinant un décalage horizontal de 0 px, un décalage vertical de 12 px, un rayon de flou gaussien de 28 px et un rayon d'étalement de -4 px, le tout teinté dans une nuance sombre transparente rgba(15, 23, 42, 0.12). L'outil génère instantanément le code CSS conforme box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.12); et affiche la prévisualisation en temps réel sur fond clair ou sombre. En activant l'option Ombre Intérieure (Inset), l'ombre bascule à l'intérieur du conteneur pour créer une impression réaliste de champ creusé ou d'élément de formulaire enfoncé.

Le code CSS généré est immédiatement copiable avec prise en charge des préfixes de compatibilité nécessaires pour une intégration directe dans vos feuilles de style.

Architecture Fondamentale & Modélisation Mathématique

Syntaxe CSS : box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>

Les coordonnées X et Y définissent le déplacement de l'ombre ; le blur contrôle la diffusion gaussienne ; le spread agrandit ou réduit le masque de l'élément ; inset projette l'ombre à l'intérieur du cadre.

Directives d'Ingénierie & Bonnes Pratiques

  • Superposer plusieurs ombres subtiles plutôt qu'une seule ombre brute : Combiner deux ombres légères (une ombre proche très nette et une ombre lointaine très diffuse) confère un rendu volumétrique incomparablement plus naturel.
  • Utiliser des valeurs négatives pour le rayon d'étalement (Spread) : Un étalement légèrement négatif (ex. -4px ou -8px) empêche l'ombre de déborder sur les côtés latéraux et concentre la diffusion sous l'élément.
  • Teinter l'ombre avec la couleur dominante de l'environnement : Évitez le noir pur opacity(0.5) ; utilisez un bleu marine très sombre ou la teinte d'accentuation de votre charte graphique pour enrichir l'esthétique.
  • Activer l'accélération matérielle pour les animations au survol : Si vous animez l'élévation au hover, animez plutôt la propriété 'transform: translateY(-4px)' combinée à l'ombre pour préserver un framerate fluide à 60 FPS.

Foire Aux Questions & Réponses d'Experts (FAQ)

À quoi sert le mot-clé 'inset' dans une propriété box-shadow ?
Le mot-clé 'inset' inverse la projection de l'ombre : au lieu d'être projetée vers l'extérieur pour donner une impression de relief en élévation, elle est dessinée à l'intérieur du cadre, créant un effet de renfoncement ou de bouton enfoncé.
Quelle est la différence entre le rayon de flou (Blur) et le rayon d'étalement (Spread) ?
Le flou (blur) applique un adoucissement progressif sans modifier la taille du masque d'origine. L'étalement (spread) agrandit (valeur positive) ou rétrécit (valeur négative) la surface même de l'ombre avant l'application du flou.
Puis-je appliquer une ombre CSS sur du texte avec cet outil ?
Oui. En mode ombre textuelle (text-shadow), la syntaxe s'adapte automatiquement (les paramètres d'étalement et d'inset étant exclus car non supportés sur les polices de caractères).
Mes palettes de couleurs et styles CSS sont-ils privés ?
Oui, à 100 %. Tous les aperçus graphiques et la génération du code CSS sont exécutés localement dans votre propre navigateur sans aucune transmission externe.