La sortie produit une valeur box-shadow et un aperçu, sans modifier le composant d'origine.
Images et couleurs · outil local
Générateur d’ombre CSS
Composer une box-shadow avec aperçu immédiat. Le résultat sert à préparation d'images et de styles avant export et reste soumis au contrôle décrit dans la page.
GratuitSans compteTraitement localMéthode visible
Résultat immédiat
Utiliser l’outil
Les valeurs restent sur cet appareil.
Remplissez les champs puis lancez l’outil.
Traitement vérifiable
Comment le résultat est produit
Le moteur applique uniquement la transformation annoncée aux valeurs saisies dans le navigateur. Il ne complète pas les données, ne contacte aucun service distant et ne prétend pas valider ce qui dépend d’un tiers. La sortie produit une valeur box-shadow et un aperçu, sans modifier le composant d'origine.
- 1
Contrôler l'unité, les bornes et l'absence de confusion entre valeur brute et pourcentage.
- 2
Lancer l’outil une première fois, puis modifier une seule valeur afin de vérifier que la sortie évolue de manière explicable.
- 3
Tester sur les fonds clair et sombre, à l'échelle réelle et avec le design system du site.
Cas de contrôle
Exemple et interprétation
Exemple vérifiable
Une carte d'interface doit recevoir une ombre légère dont les décalages, flou et étalement restent contrôlables. La sortie produit une valeur box-shadow et un aperçu, sans modifier le composant d'origine.
Tester sur les fonds clair et sombre, à l'échelle réelle et avec le design system du site.
Une ombre trop sombre ou trop large réduit la lisibilité et donne une hiérarchie artificielle.
Usage concret
Quand cet outil est réellement utile
Situation adaptée
Une carte d'interface doit recevoir une ombre légère dont les décalages, flou et étalement restent contrôlables.
Ce que dit la sortie
La sortie produit une valeur box-shadow et un aperçu, sans modifier le composant d'origine.
Contrôle indispensable
Tester sur les fonds clair et sombre, à l'échelle réelle et avec le design system du site.
Bien préparer les données
| Champ | Comment le renseigner |
|---|---|
| Décalage horizontal | Contrôler l'unité, les bornes et l'absence de confusion entre valeur brute et pourcentage. |
| Décalage vertical | Contrôler l'unité, les bornes et l'absence de confusion entre valeur brute et pourcentage. |
| Flou | Contrôler l'unité, les bornes et l'absence de confusion entre valeur brute et pourcentage. |
| Étalement | Contrôler l'unité, les bornes et l'absence de confusion entre valeur brute et pourcentage. |
| Couleur | Recopier la valeur depuis la source de référence et relire les caractères significatifs. |
Erreur fréquente
Une ombre trop sombre ou trop large réduit la lisibilité et donne une hiérarchie artificielle.
Limites visibles
Ce que cet outil ne permet pas de conclure
Le rendu dépend du fichier, du navigateur, de l'écran et du contexte de publication. Une ombre trop sombre ou trop large réduit la lisibilité et donne une hiérarchie artificielle.
Traçabilité
Sources et cadre de référence
Révision éditoriale : 18 août 2026.
La politique de sélection des références est détaillée dans Références et méthodologie. La rubrique publie aussi ses références propres et ses contrôles reproductibles.
Questions fréquentes
Bien utiliser cet outil
Dans quel cas utiliser « Générateur d’ombre CSS » ?
Utilisez cet outil pour préparation d'images et de styles avant export. Une carte d'interface doit recevoir une ombre légère dont les décalages, flou et étalement restent contrôlables.
Comment contrôler le résultat ?
Tester sur les fonds clair et sombre, à l'échelle réelle et avec le design system du site.
Quelle est la limite principale ?
Le rendu dépend du fichier, du navigateur, de l'écran et du contexte de publication. Une ombre trop sombre ou trop large réduit la lisibilité et donne une hiérarchie artificielle.
Outils proches