Générateur de box-shadow CSS
La déclaration, pas une zone à faire glisser.
Les exemples remplacent temporairement la saisie et les réglages. Vous pouvez rétablir votre travail précédent.
0 caractères
- ombres
- 1
Résultat
box-shadow: 0px 4px 12px rgba(0,0,0,.15);
Vos fichiers restent sur votre appareil
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous collez est traité sur votre appareil et n’est jamais envoyé à un serveur : vous pouvez l’utiliser sans crainte avec des jetons, des clés et des textes non publiés.
Exemple
Exemple : un champ de formulaire creusé et un anneau de focus sans flou
Pour le formulaire d’adhésion d’un club de randonnée, Hugo veut des champs qui paraissent légèrement creusés et, quand on clique dedans, un anneau bleu net plutôt qu’une ombre floue. Il tape une ombre par ligne dans la zone de texte au lieu d’utiliser les curseurs.
- Champ au repos : 0 1 2 rgba(0,0,0,.08) avec « Vers l’intérieur » coché. L’ombre est dessinée dans la boîte, le long du bord haut, comme si le champ était enfoncé.
- Champ actif : 0 0 0 3 rgba(37,99,235,.45), case décochée. Décalages et flou à 0, étalement 3 : l’ombre devient un anneau net de 3 px tout autour, qui suit les coins arrondis.
- « Vers l’intérieur » s’applique à toutes les lignes tapées : pour garder le creux et l’anneau sur le même champ, générez-les séparément et réunissez-les à la main, avec une virgule.
- Pour le titre posé sur la photo d’en-tête, passez à text-shadow : 0 1 2 2 rgba(0,0,0,.5) donne l’ombre sans le dernier 2, l’étalement, que text-shadow n’accepte pas ; une note l’explique sous le code.
| Ce qui est tapé | Déclaration obtenue |
|---|---|
| (rien, curseurs par défaut) | box-shadow: 0px 4px 12px rgba(0,0,0,.15); |
| 0 1 2 rgba(0,0,0,.08), Vers l’intérieur coché | box-shadow: inset 0px 1px 2px rgba(0,0,0,.08); |
| 0 0 0 3 rgba(37,99,235,.45) | box-shadow: 0px 0px 0px 3px rgba(37,99,235,.45); |
| 0 1 2 rgba(0,0,0,.06) et 0 0 0 3 rgba(37,99,235,.45), sur deux lignes | box-shadow: 0px 1px 2px rgba(0,0,0,.06), 0px 0px 0px 3px rgba(37,99,235,.45); |
| 0 1 2 2 rgba(0,0,0,.5), text-shadow | text-shadow: 0px 1px 2px rgba(0,0,0,.5); et la note sur l’étalement |
La déclaration creusée va dans la règle du champ (input), l’anneau dans input:focus — ou les deux réunies, si le creux doit rester pendant la saisie. Comme une ombre ne prend aucune place dans la mise en page, rien ne bouge quand le champ reçoit le focus.
Comment ça marche
- Utilisez les curseurs pour une seule ombre, ou tapez-en une par ligne pour en superposer plusieurs.
- Une ligne, c’est « x y flou étalement couleur » — tout nombre omis vaut zéro.
- Passez à text-shadow si c’est du texte que vous ombrez.
- Copiez la déclaration.
Questions fréquentes
- Pourquoi voudrais-je plus d’une ombre ?
- Parce qu’une seule ne rend presque jamais bien. Une vraie ombre, c’est un liseré sombre serré plus un large halo doux ; en empiler deux ou trois avec des flous et des opacités différents est ce qui fait qu’une carte semble décollée de la page plutôt que soulignée.
- À quoi sert l’étalement ?
- Il agrandit ou rétrécit l’ombre avant le flou. Un étalement négatif la resserre : c’est ainsi qu’on obtient une ombre qui se tient sous un élément sans déborder sur les côtés.
- Pourquoi mon étalement de text-shadow est-il ignoré ?
- Parce que text-shadow n’a pas d’étalement : il ne prend que x, y, flou et couleur, et un navigateur qui trouve une quatrième longueur rejette toute la déclaration — aucune ombre ne s’affiche. La page retire donc ce nombre du CSS et le signale par une note en dessous.
- Qu’est-ce que « vers l’intérieur » ?
- L’ombre est dessinée dans la boîte au lieu d’en sortir, ce qui donne l’impression d’un élément enfoncé. Cela ne vaut que pour box-shadow.
- Comment faire un contour net, sans flou ?
- Mettez les décalages et le flou à 0 et donnez l’épaisseur voulue à l’étalement : 0 0 0 3 rgba(37,99,235,.45) donne un anneau de 3 px tout autour de l’élément. Contrairement à une bordure, il ne change pas la taille de la boîte, ce qui en fait un indicateur de focus courant.
- Puis-je mélanger des ombres intérieures et extérieures ?
- Pas en une seule fois : la case « Vers l’intérieur » s’applique à toutes les lignes tapées. Générez les ombres intérieures, puis les extérieures, et collez les deux listes dans la même déclaration box-shadow, séparées par une virgule ; le CSS l’accepte sans problème.
- Quelque chose part-il vers un serveur ?
- Non. Tout tourne dans le navigateur : ce que vous saisissez reste sur votre ordinateur.
Outils associés
◒ Générateur de dégradé CSS Des couleurs d’un côté, une déclaration de l’autre. ◒ Convertisseur de couleur HEX, RGB, HSL et CMJN — plus le rapport de contraste qui décide de la lisibilité. ◒ Formateur CSS Une déclaration par ligne — ou tout le fichier sur une seule. ◐ Vérificateur de contraste Si quelqu’un peut vraiment le lire.