Ombre CSS box-shadow intérieure — Code prêt à l'emploi
Créez du code CSS box-shadow visuellement : des curseurs pour le décalage, le flou, l'étalement, la couleur avec opacité, le mode inset et jusqu'à quatre couches avec un aperçu en direct.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur de box-shadow avec la case Inset déjà cochée, de sorte que l'ombre est dessinée à l'intérieur de l'élément au lieu de derrière. La carte d'aperçu montre l'effet enfoncé immédiatement, et chaque curseur continue de mettre à jour la ligne CSS en direct.
Les ombres intérieures sont la façon dont le CSS simule la profondeur vers l'intérieur : les états de bouton enfoncé, les champs de recherche et les zones de saisie, les cuvettes de barre de progression et les panneaux gravés en dépendent tous. Comme l'ombre épouse le bord intérieur, le flou et l'étalement se comportent légèrement différemment d'une ombre portée normale — les curseurs ici vous permettent de ressentir cette différence immédiatement.
Quand l'aspect enfoncé vous convient, copiez la ligne box-shadow dans votre feuille de styles. Vous pouvez également combiner une couche intérieure avec des couches extérieures normales — ajoutez une deuxième couche et décochez Inset dessus pour mélanger les deux dans une seule déclaration.