Quand s'en servir ? Régler visuellement une ombre portée CSS (externe ou interne, simple ou en double couche pour un effet d'élévation plus réaliste) et récupérer le code exact, plutôt que de deviner les valeurs à la main.
Guide pratique
La propriété box-shadow en CSS accepte jusqu'à cinq valeurs dans un ordre précis (décalage horizontal, décalage vertical, flou, étalement, couleur), et se tromper sur l'ordre ou oublier un paramètre donne souvent une ombre qui ne ressemble pas à ce qu'on imaginait.
Exemple : régler un décalage horizontal à 0px, un décalage vertical à 4px, un flou de 12px et une couleur noire à 15 % d'opacité produit le code box-shadow: 0px 4px 12px rgba(0,0,0,0.15); - une ombre douce typique d'une carte (card) moderne. Augmenter le flou à 30px et réduire l'opacité donne une ombre beaucoup plus diffuse, utile pour un effet de survol (hover) plus prononcé.
- Pour un développeur qui veut reproduire l'effet d'élévation visible sur une maquette Figma ou Sketch.
- Pour tester visuellement la différence entre une ombre portée discrète et une ombre marquée sans recharger la page à chaque modification de code.
- Pour générer une ombre interne (inset) souvent utilisée sur des champs de formulaire ou des boutons enfoncés.
L'aperçu visuel immédiat permet de juger si l'ombre paraît naturelle ou artificielle, un jugement qui est presque impossible à faire en lisant uniquement les valeurs numériques du code.
Questions fréquentes
Que change l'étalement (spread) par rapport au flou ?
Le flou adoucit les bords de l'ombre ; l'étalement agrandit ou réduit la taille de l'ombre elle-même avant l'application du flou, un peu comme si on redimensionnait la forme d'origine.
Comment ajouter plusieurs ombres en CSS ?
En séparant plusieurs valeurs `box-shadow` par des virgules dans la même propriété - cet outil génère une seule ombre à la fois, à combiner manuellement si besoin.
Cet outil fait partie de Quiko, une collection de 101 générateurs gratuits.