Toolorio

Générateur de box-shadow CSS

Ajustez les curseurs pour concevoir une ombre visuellement, puis copiez le CSS généré directement dans votre feuille de style.

CSS
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);

Your files are processed locally in your browser. They are not uploaded to our servers.

Comment l'utiliser

  1. Faites glisser les curseurs de décalage, flou et étendue pour façonner l'ombre.
  2. Choisissez une couleur d'ombre, ajustez son opacité et activez inset si besoin.
  3. Copiez le CSS box-shadow généré affiché sous l'aperçu.

Qu'est-ce que cet outil ?

Générateur de box-shadow CSS vous permet de concevoir visuellement une ombre CSS grâce à des curseurs de décalage, flou, étendue et opacité, ainsi qu'un sélecteur de couleur et un interrupteur inset. Un aperçu en direct montre l'ombre au fur et à mesure des ajustements, et le CSS exact est généré automatiquement.

Utilisations courantes

  • Concevoir l'ombre d'une carte ou d'un bouton sans deviner les valeurs en pixels
  • Prototyper des effets d'élévation et de profondeur pour une interface
  • Apprendre comment chaque paramètre de box-shadow affecte le résultat
  • Générer rapidement du CSS d'ombre pour une bibliothèque de composants

Outils similaires

PWGénérateur de mot de passeOutils de développement{}Formateur JSONOutils de développement64Codeur/Décodeur Base64Outils de développementURLEncodeur/décodeur d'URLOutils de développementUIDGénérateur d'UUIDOutils de développementSHAGénérateur de hachageOutils de développementHEXConvertisseur de couleursOutils de développementTSConvertisseur d'horodatageOutils de développementC2JConvertisseur CSV vers JSONOutils de développementJ2CConvertisseur JSON vers CSVOutils de développementJ2TConvertisseur JSON vers TypeScriptOutils de développement0x1Convertisseur de base numériqueOutils de développementIVConvertisseur de chiffres romainsOutils de développementUTMNettoyeur d'URL de suiviOutils de développementX2JXML vers JSONOutils de développementGFGénérateur CSS Grid et FlexboxOutils de développementCJGénérateur de cronjobOutils de développementRXTesteur de RegExOutils de développementHEConvertisseur d'entités HTMLOutils de développementTGGénérateur de fréquence et de tonalitéOutils de développementSTTesteur stéréo audioOutils de développementGCConvertisseur de coordonnées GPSOutils de développement

Questions fréquentes

À quoi sert la valeur d'étendue ?

L'étendue agrandit ou réduit la taille de l'ombre dans toutes les directions avant l'application du flou — des valeurs positives rendent l'ombre plus grande que l'élément, des valeurs négatives la rendent plus petite.

Qu'est-ce qu'une ombre inset ?

Une ombre inset est dessinée à l'intérieur de la bordure de l'élément plutôt qu'à l'extérieur, créant un aspect enfoncé plutôt que surélevé.

Puis-je créer plusieurs ombres superposées ?

Cet outil génère une seule couche d'ombre. Pour des ombres superposées, vous pouvez combiner manuellement plusieurs valeurs box-shadow (séparées par des virgules), en concevant chaque couche individuellement avec cet outil.