Entrée
Préparation de votre espace de travail…
Mode d’emploi
- Réglez les décalages horizontal et vertical, le flou et l’étalement.
- Choisissez couleur et opacité ; activez Ombre interne si nécessaire.
- Vérifiez l’aperçu et choisissez Copier le CSS.
Construire une ombre de boîte
Les ombres détachent une carte du fond ou évoquent une surface creuse. Quelques valeurs suffisent à régler cet effet sans préparer d’image.
L’aperçu montre les changements de géométrie et de couleur. Le rayon des coins permet de comparer les formes sans ajouter de déclarations étrangères à la sortie.
Décalage, flou et étalement
Les décalages déplacent l’ombre par rapport à l’élément. Les valeurs négatives vont à gauche ou en haut, les positives à droite ou en bas.
Le flou adoucit le bord et ne peut pas être négatif. Un étalement négatif réduit l’emprise de l’ombre ; positif, il l’agrandit.
0px 8px 24px 0px, black at 15%box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);Une ombre extérieure décalée de 8px vers le bas, avec flou de 24px et noir à 15 %.
Couleur et ombre interne
Le sélecteur définit la couleur et l’opacité contrôle son alpha. Une faible opacité laisse davantage apparaître le fond de la page.
Ombre interne place l’ombre dans la boîte. Le générateur n’en crée qu’une ; plusieurs couches nécessitent une liste CSS séparée par des virgules.
Utiliser le CSS
Copier le CSS exporte uniquement box-shadow:. Pour retrouver la forme arrondie de l’aperçu, ajoutez border-radius séparément.
Texte de 1 MiB maximum. Les transformations CSS et HTML s'exécutent dans un worker avec une limite de 30 secondes. Les outils de couleur utilisent sRGB ; les styles générés sont des aperçus à tester dans votre propre mise en page.
Questions fréquentes
Le rayon des coins est-il inclus dans le CSS ?
Non. Il ne concerne que l’aperçu. Ajoutez une déclaration border-radius pour reproduire la forme.
Quelle différence entre flou et étalement ?
Le flou adoucit le bord. L’étalement agrandit ou réduit l’emprise avant l’application du flou.
L’étalement peut-il être négatif ?
Oui. Il réduit alors l’ombre ; le flou doit rester nul ou positif.
Puis-je créer une ombre intérieure ?
Oui. Activez Ombre interne et la déclaration contiendra le mot-clé inset.
Plusieurs couches d’ombre sont-elles générées ?
Non. Combinez la valeur copiée avec d’autres ombres séparées par des virgules dans votre CSS.