Générateur de dégradés CSS
Dégradés linéaires, radiaux et coniques.
Design
Générateur d'ombres CSS
Ombres portées box-shadow avec aperçu.
Ce que fait cet outil. Cet outil génère du code box-shadow avec aperçu en direct. Ce qui distingue une ombre crédible d'une ombre plate n'est pas le réglage du flou, mais l'empilement de plusieurs ombres.
Fonctionne dans le navigateurAucun envoiSans inscriptionFonctionne hors ligne
Comment utiliser Générateur d'ombres CSS
- Réglez décalage, flou, étalement et couleur.
- Ajoutez des couches pour une ombre plus réaliste.
- Copiez le CSS obtenu.
Les cinq valeurs
La syntaxe est box-shadow : décalage-x décalage-y flou étalement couleur.
| Valeur | Rôle |
|---|---|
| Décalage X | déplace l'ombre latéralement |
| Décalage Y | la déplace vers le haut ou le bas |
| Flou | adoucit le bord |
| Étalement | agrandit ou rétrécit l'ombre |
| inset | la dessine vers l'intérieur |
Seuls les deux décalages sont obligatoires. Le reste a des valeurs par défaut, donc box-shadow: 0 2px rgba(0,0,0,.2) est valide.
L'étalement négatif est plus utile qu'il n'y paraît : il rétrécit l'ombre et l'empêche de dépasser sur les côtés, ce qui rend très naturelles les ombres douces et basses.
Le mot-clé inset transforme l'ombre en ombre intérieure. Il sert à creuser un champ de formulaire ou à marquer un état enfoncé.
Et l'on peut enchaîner plusieurs ombres séparées par des virgules, ce qui fonde toute la section suivante.
Une ombre seule n'est presque jamais crédible
C'est la différence concrète entre une ombre de gabarit et une ombre conçue.
Dans la réalité, une ombre comporte plusieurs composantes : une zone sombre et étroite tout près de l'objet, et une zone diffuse et large bien plus loin.
Une ombre CSS unique ne peut pas représenter les deux, il faut donc les empiler. Deux ou trois couches suffisent : la première courte et un peu plus opaque, les suivantes plus longues, plus floues et plus transparentes.
Une structure type serait une couche à 1px avec 2px de flou, une autre à 4px avec 8px, et une troisième à 10px avec 20px, chacune moins opaque que la précédente.
Deuxième règle : n'utilisez pas de noir pur. Une ombre noire sur fond coloré paraît sale. Prenez une teinte foncée de la couleur du fond, ou un bleu très sombre, et avec de la transparence.
Troisième règle : gardez une direction cohérente dans toute l'interface. Si la lumière vient du haut, toutes les ombres descendent. Des ombres de directions différentes sur un même écran se remarquent, même sans savoir pourquoi.
Performance et solutions de remplacement
Quelques points à connaître avant d'en mettre partout.
Les ombres très floues coûtent cher à rendre, surtout sur mobile. Animer le flou directement provoque des saccades.
La méthode habituelle pour animer une élévation consiste à superposer deux ombres et à animer leur opacité, ou à porter la grande ombre par un pseudo-élément dont on anime l'opacity. Cela, en revanche, est accéléré matériellement.
S'il vous faut une ombre qui épouse la silhouette d'une image transparente plutôt que le rectangle de l'élément, box-shadow ne convient pas : la bonne propriété est filter: drop-shadow().
Pour un simple liseré, une bordure ou un outline vaut mieux qu'une ombre sans flou, et coûte moins cher à peindre.
Enfin, en mode sombre les ombres perdent l'essentiel de leur effet, faute de marge pour assombrir davantage. L'usage est alors d'indiquer l'élévation par un fond un peu plus clair plutôt que par une ombre.
Questions fréquentes
Pourquoi mon ombre paraît-elle plate ?
Parce qu'elle est en une seule couche. Empilez-en deux ou trois, la première courte et opaque.
Faut-il utiliser du noir pur ?
Non. Une teinte foncée de la couleur de fond avec de la transparence est bien plus propre.
À quoi sert l'étalement négatif ?
À rétrécir l'ombre pour qu'elle ne dépasse pas sur les côtés, ce qui est très naturel.
Comment animer une ombre sans saccade ?
En animant l'opacité de deux ombres superposées, pas le flou.
Et en mode sombre ?
Elles perdent leur effet. Indiquez l'élévation par un fond un peu plus clair.
Mes données sont-elles transmises ?
Non.
Guides pour Générateur d'ombres CSS
- CSS Gradients, Shadows and Palettes7 min read