Générer une ombre CSS avec `box-shadow`

Renseignez les quatre valeurs de l’ombre et sa couleur, puis activez inset si l’effet doit être intérieur. La génération fournit une déclaration box-shadow qui ajoute px aux valeurs numériques.

Préparer l’effet d’ombre dont vous avez besoin

Ce générateur aide à composer une déclaration CSS box-shadow à partir de réglages lisibles. Il est utile lorsque vous voulez ajuster séparément la position de l’ombre, son flou, son extension, sa couleur ou son placement à l’intérieur d’un élément, sans assembler toute la déclaration manuellement. Le résultat peut ensuite être repris dans la règle CSS du sélecteur qui doit recevoir l’effet. Les paramètres proposés couvrent les deux décalages, le flou, l’extension, la couleur et le mode inset.

Régler les valeurs puis générer la déclaration

1. Ouvrez l’outil et examinez les commandes consacrées à l’ombre. Identifiez les quatre entrées numériques avant de modifier la valeur de couleur ou l’option d’affichage intérieur.

2. Renseignez le décalage horizontal, puis le décalage vertical. Ces deux valeurs déterminent la position de l’ombre par rapport à l’élément. Ajoutez ensuite une valeur de flou et une valeur d’extension. Ces quatre réglages sont traités comme des nombres et correspondent, dans cet ordre, aux quatre valeurs numériques de la déclaration produite.

3. Saisissez la couleur dans le champ textuel prévu à cet effet. Si vous conservez les réglages initiaux, les valeurs prévues sont 2 pour le décalage horizontal, 2 pour le décalage vertical, 5 pour le flou, 0 pour l’extension et #00000033 pour la couleur. Vous pouvez donc partir de cette combinaison, puis remplacer uniquement les paramètres nécessaires à votre mise en page.

4. Décidez si l’ombre doit se trouver à l’intérieur de l’élément. Activez la case inset dans ce cas ; laissez-la désactivée pour une ombre extérieure. Cette sélection modifie le contenu de la déclaration générée, plutôt que la valeur de l’un des quatre nombres.

5. Lancez la génération après avoir relu les champs. La déclaration obtenue reprend les valeurs fournies, ajoute px aux quatre valeurs numériques et ajoute inset lorsque la case correspondante est activée. Copiez ensuite cette déclaration dans la règle du sélecteur CSS concerné, puis observez le rendu dans votre feuille de style.

Vérifier la sortie et ses limites d’interprétation

Le résultat attendu est une déclaration box-shadow composée des décalages horizontal et vertical, du flou, de l’extension et de la couleur que vous avez indiqués. Les quatre nombres sont suivis de px dans la sortie, ce qui distingue la déclaration produite des valeurs numériques saisies dans les champs. Le mot inset apparaît également dans la déclaration si le mode intérieur a été sélectionné.

Un zéro peut être accepté pour le décalage horizontal, le décalage vertical, le flou et l’extension dans le cas testé. Cette possibilité permet notamment de demander une ombre sans décalage ou sans flou dans ce parcours, sans conclure pour autant que toutes les combinaisons de valeurs se comportent de la même façon. Le calcul présenté aboutit à un résultat réussi.

Pour contrôler votre résultat, comparez l’ordre des quatre nombres avec les réglages utilisés, vérifiez la présence de la couleur saisie et regardez si inset correspond au placement souhaité. Les informations vérifiées ne précisent pas de plages numériques, de règles de validation pour la couleur, de méthode d’arrondi ni de limite de sortie. Si l’effet visuel ne correspond pas à votre intention, relisez donc les valeurs et l’état de la case avant de réutiliser la déclaration.

Exemple pratique

Vous préparez une ombre extérieure légèrement étendue pour une carte et souhaitez obtenir sa déclaration CSS sans la composer manuellement.

Pour une carte, saisissez 4 comme décalage horizontal, 6 comme décalage vertical, 12 comme flou, 2 comme extension et #00000055 comme couleur ; laissez ensuite inset désactivé avant de générer la déclaration.

Une déclaration box-shadow contenant 4px 6px 12px 2px #00000055 et ne contenant pas inset.

Limites

• Les éléments vérifiés ne donnent pas de plage numérique, de règle de couleur, de comportement d’arrondi ou de limite de sortie.

Erreurs fréquentes

• Une ombre intérieure est demandée, mais la case inset n’a pas été activée. Sélectionnez cette option avant de relancer la génération afin que le mot inset figure dans la déclaration.

Questions fréquentes

Quels paramètres peut-on personnaliser ?

Les réglages disponibles portent sur le décalage horizontal, le décalage vertical, le flou, l’extension et la couleur. Les quatre premiers utilisent des valeurs numériques, tandis que la couleur est saisie sous forme de texte ; les valeurs prévues au départ sont 2, 2, 5, 0 et #00000033.

Comment obtenir une ombre intérieure ?

Pour placer l’ombre à l’intérieur, activez la case inset avant de lancer la génération. La déclaration produite contient alors ce mot pour signaler le mode intérieur.

Le générateur accepte-t-il zéro pour les valeurs numériques ?

Dans le cas testé, les deux décalages, le flou et l’extension peuvent recevoir la valeur zéro. Le parcours de calcul présenté signale alors une réussite, sans fournir de règle générale sur d’autres valeurs ou combinaisons.