Générateur de box-shadow

Qu’est-ce qu’un générateur de box-shadow ?

Il propose des curseurs pour les quatre nombres qu’accepte une ombre CSS — décalage horizontal, décalage vertical, rayon de flou et étalement — plus une couleur, et écrit la déclaration. Ajoutez des ombres et elles s’empilent : c’est ainsi que se construisent les ombres douces et superposées des interfaces d’aujourd’hui.

Celui-ci vous dit en plus ce que signifie le rayon de flou, car il ne signifie pas ce que son nom laisse croire. Le panneau sous l’aperçu convertit votre flou en le nombre que le moteur emploie réellement, et en la distance à laquelle votre ombre peint encore.

Tout tourne dans votre navigateur. Rien n’est envoyé et il n’y a pas de compte.

Comment utiliser le générateur

1. Réglez les quatre nombres. Le décalage déplace l’ombre, le flou adoucit son bord, et l’étalement agrandit ou rétrécit la forme avant tout floutage. Un étalement négatif, c’est ainsi qu’on obtient une ombre serrée sous une carte sans halo autour.
2. Ajoutez des couches pour la profondeur. La vraie profondeur vient plutôt de deux ou trois ombres à flous différents que d’une seule très grande. Notez que les ombres sont peintes la première au-dessus, à l’inverse du sens de lecture de la liste.
3. Lisez le panneau, puis copiez. Il donne l’écart-type gaussien correspondant à votre flou, la distance à laquelle l’ombre peint encore, et la valeur de filter: blur() qui rendrait pareil. Le bloc CSS est prêt à coller.

Un rayon de flou de 20px, ce n’est pas 20px de flou

La spécification CSS est précise là-dessus, et presque aucun générateur ne le répète. Dans sa section sur le floutage des bords d’ombre, CSS Backgrounds and Borders Level 3 énonce que l’ombre rendue doit approcher — chaque pixel restant à 5 % de sa valeur exacte — l’image qu’on obtiendrait en appliquant un flou gaussien dont l’écart-type vaut la moitié du rayon de flou.

Ainsi `box-shadow: 0 0 20px` est une gaussienne d’écart-type 10. Le rayon de flou vaut deux sigmas. Ce n’est pas un détail si vous employez aussi des filtres, car `filter: blur(20px)` prend directement un écart-type : même nombre, même mot, deux fois plus d’adoucissement. Pour reproduire un `filter: blur(N)` avec une ombre, il faut un rayon de 2N, ce que cet outil vérifie comme une identité exacte à chaque distance, non comme une approximation.

Deux conséquences utiles découlent du calcul. Flouter un bord droit avec une gaussienne donne une fonction d’erreur, et une fonction d’erreur passe exactement par la moitié au niveau de la marche. Une ombre floutée se situe donc exactement à 50 % de l’alpha de sa couleur le long du contour que vous avez tracé, et non à pleine intensité. La moitié du flou tombe à l’intérieur de la forme et la moitié à l’extérieur : c’est pourquoi augmenter le flou n’agrandit jamais une ombre ; cela rend le bord plus diffus et, sur le bord, plus clair. Agrandir une ombre, c’est le rôle de l’étalement, et les deux sont sans cesse confondus.

La seconde conséquence est celle qui cause des bogues. Une gaussienne a des queues : une ombre ne s’arrête donc pas à son rayon de flou. Chercher où l’alpha passe sous un pas de 8 bits — le point au-delà duquel plus rien ne peut être dessiné — donne environ 1,33 fois le rayon, dans toutes les directions et à toute taille. Un flou de 20px peint encore quelque chose à 27px. Si un conteneur a overflow hidden et que votre ombre paraît rognée alors que les nombres semblaient tenir, c’est ce rapport qui l’explique.

Rien de tout cela ne rend une ombre fausse ; cela la rend prévisible. La raison de connaître l’écart-type, c’est qu’il est le nombre dans lequel tous les autres flous de la chaîne s’expriment — filtres SVG, ombres de canvas, outils de design — et que box-shadow fait exception en le doublant.

Limites assumées

L’aperçu est un vrai élément avec un vrai box-shadow : ce que vous voyez, c’est votre navigateur qui le dessine. Les chiffres du panneau sont calculés d’après la spécification, non mesurés sur les pixels : la spécification tolère 5 % par pixel, un navigateur a donc le droit de s’écarter un peu de la gaussienne idéale, et certains le font, surtout aux très grands rayons où ils approchent par flous de boîte répétés.

Le panneau d’analyse décrit la première ombre de la liste. Avec plusieurs couches, le calcul vaut pour chacune séparément puis se compose, ce qu’un nombre unique ne saurait résumer honnêtement — l’outil ne fait donc pas semblant.

La portée est calculée pour un bord droit. Dans un angle, l’ombre est le flou d’une forme courbe, la décroissance diffère donc légèrement, et pour une ombre intérieure toute la géométrie s’inverse. Le chiffre du bord droit est le bon pour la question pratique — quelle place cela demande-t-il — et il n’est pas exact aux angles.

Le langage visuel de ce site proscrit les ombres, et cela n’a pas changé : le carré de l’aperçu est la seule ombre de cette page, tout le reste est plat à dessein. La règle vaut pour nos pages, pas pour un outil destiné à celles des autres. Il faut d’ailleurs dire qu’une ombre est souvent le mauvais instrument : un filet d’un pixel ou un fond teinté portent la même hiérarchie, sans coût de rendu ni halo.

Le moteur porte 40 assertions. JavaScript n’ayant pas de fonction d’erreur, il a fallu en écrire une ; elle est confrontée à la bibliothèque standard de Python sur 1207 points, avec une erreur maximale inférieure à 1e-7, assortie d’un contrôle vérifiant qu’une fonction fausse d’allure plausible échoue à la même barre. Le harnais lance lui-même l’oracle Python plutôt que d’exiger une étape préalable, après qu’une première version a silencieusement sauté cette comparaison sous Windows, Git Bash et Node ne s’accordant pas sur l’emplacement de /tmp.

Pourquoi est-ce gratuit ?

Quatre curseurs et une fonction d’erreur, c’est un travail que votre machine fait instantanément. Rien n’est envoyé, il n’y a pas de compte, et rien à filigraner.

Si vous cherchez des coins plutôt que des ombres, le générateur de border-radius de ce site est juste à côté, et il raconte une histoire voisine sur une règle de la spécification que personne n’expose.