Générateur de box-shadow
Réglez décalage, flou et étendue avec des curseurs et copiez la ligne box-shadow.
CSS
Créer une ombre portée CSS en ligne
Les ombres détachent cartes, boutons et menus de la page. Cette page ouvre le Générateur CSS sur son onglet ombre portée : vous ajustez l'ombre sur un aperçu au lieu de modifier des nombres et de recharger.
Ombres courantes
| CSS | Usage |
|---|---|
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); | Ombre fine pour cartes et champs de saisie |
box-shadow: 0px 12px 32px -8px rgba(30, 27, 75, 0.35); | Carte doucement surélevée |
box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1); | Ombre décalée nette, style flat |
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.25); | Champ ou bouton enfoncé |
Performances
Les grandes ombres floues coûtent du temps de rendu, surtout quand elles sont animées. Pour animer une ombre au survol, une astuce courante consiste à placer l'ombre sur un pseudo-élément et à animer son opacité plutôt que l'ombre elle-même.
Outils associés
Pour arrondir le même élément, voyez le générateur de border-radius ; l'ombre suit les coins arrondis. Pour un fond, voyez le générateur de dégradé CSS.