Générez une valeur box-shadow CSS

Créez une valeur box-shadow CSS prête à copier à partir de cinq entrées explicites, sans assembler vous-même la syntaxe. Indiquez les décalages horizontal et vertical, le rayon de flou, le rayon d’étalement et toute couleur reconnue par CSS. Le générateur valide les champs numériques, refuse les valeurs négatives de flou ou d’étalement et renvoie une ombre formatée de façon cohérente en pixels. Il convient aux travaux de conception interactifs, aux chaînes de jetons de design, aux générateurs de composants et aux tests qui doivent produire exactement le même résultat pour une entrée donnée.

Positionnez l’ombre avec les décalages horizontal et vertical

Les deux valeurs sont exprimées en pixels CSS dans le résultat généré. Un décalage horizontal positif déplace l’ombre vers la droite, tandis qu’une valeur négative la déplace vers la gauche. Un décalage vertical positif la déplace vers le bas et une valeur négative vers le haut.

Zéro conserve le centrage sur l’axe concerné. Ces champs acceptent des décimales lorsqu’un système de design utilise des espacements fractionnaires, et le générateur préserve le nombre validé sans l’arrondir discrètement. Tenez compte de la source lumineuse apparente : une lumière placée en haut à gauche produit généralement une ombre en bas à droite.

De petits décalages donnent souvent une impression de proximité et de subtilité, alors que de grandes valeurs peuvent faire paraître l’élément surélevé ou volontairement graphique. L’outil ne déduit pas la direction à partir du flou, de la couleur ou du type de composant. Vous gardez donc la maîtrise des valeurs et pouvez les reproduire exactement dans vos feuilles de style et vos builds.

Réglez la douceur et l’emprise grâce au flou et à l’étalement

Le rayon de flou contrôle la transition progressive entre la zone la plus marquée de l’ombre et la transparence. Une valeur nulle crée un bord net, tandis que des valeurs plus élevées produisent une ombre plus douce et visuellement plus large. Le rayon d’étalement agrandit la forme de l’ombre avant l’application du flou.

Zéro respecte l’emprise initiale de l’élément et une valeur positive l’étend de tous les côtés. Cette capacité refuse volontairement les valeurs négatives de flou et d’étalement. Saisissez chaque valeur sous forme de nombre brut ; le CSS renvoyé ajoute les unités px dans l’ordre requis.

Le flou et l’étalement sont deux réglages différents : augmenter l’un ne remplace pas l’autre. Pour une ombre d’interface discrète, associez un décalage modeste à un flou moyen et à peu ou pas d’étalement. Pour un contour de focus marqué ou un effet d’affiche, un flou nul et un étalement plus fort créent une bordure nette.

Prévisualisez le résultat sur la surface réelle, car le contraste et les couleurs environnantes modifient la douceur perçue.

Choisissez une couleur et appliquez la valeur produite

Le champ de couleur accepte une valeur CSS non vide, notamment un nom de couleur, une notation hexadécimale ou une forme fonctionnelle telle que rgb() ou hsl(). La transparence alpha est souvent essentielle à une ombre naturelle, car une couleur sombre opaque peut sembler lourde sur une surface claire et terne sur un fond coloré. Le générateur supprime les espaces superflus autour de la valeur, vérifie l’équilibre des parenthèses et refuse les caractères susceptibles de rompre une déclaration.

Affectez cette valeur à la propriété box-shadow, insérez-la dans une propriété personnalisée ou conservez-la comme jeton de design. La réponse est une valeur et non une déclaration complète ; votre application choisit donc le sélecteur et décide d’ajouter ou non d’autres couches. Une requête produit une seule couche d’ombre.

Pour plusieurs ombres, générez et vérifiez chaque couche séparément avant de joindre les valeurs par des virgules. L’exécution est déterministe et ne dépend ni du réseau, ni d’un modèle, ni du hasard, ni du stockage, ni de l’horloge, ce qui la rend adaptée aux instantanés et aux builds reproductibles.