CSS Box Shadow Generator

CSS Box Shadow Generator offre aux concepteurs et aux développeurs un éditeur visuel pour CSS box-shadow avec aperçu en temps réel. Le panneau d'aperçu affiche une carte blanche sur fond gris avec l'ombre actuelle appliquée, se mettant à jour instantanément à mesure que tout contrôle change. Cinq curseurs contrôlent le décalage horizontal, le décalage vertical, le rayon de flou, le rayon de propagation et l'opacité de l'ombre. La bascule en médaillon bascule entre les ombres portées et les ombres intérieures. Le système multicouche est la caractéristique clé : le bouton Ajouter une ombre empile jusqu'à 5 couches d'ombre indépendantes avec des contrôles individuels. Douze préréglages prédéfinis sont affichés sous forme de vignettes de carte afin que vous puissiez voir l'effet avant de cliquer. La section de sortie affiche la valeur complète de la propriété box-shadow, la règle CSS complète prête à être collée et la classe équivalente Tailwind lorsqu'elle existe.

Principales fonctionnalités

• Aperçu en temps réel

  L'aperçu de la carte en direct se met à jour instantanément à mesure que le contrôle des ombres change.

• Cinq contrôles de curseur

  Curseurs de décalage horizontal, de décalage vertical, de flou, de propagation et d’opacité par calque d’ombre.

• Ombres multicouches

  Empilez jusqu'à 5 calques d'ombre indépendants composés dans l'aperçu.

• Bascule d'ombre insérée

  Bascule entre les ombres portées extérieures et les ombres intérieures incrustées.

• 12 préréglages de conception

  Préréglages prédéfinis affichés sous forme de vignettes avec l'ombre déjà appliquée pour un chargement instantané.

• Sortie de classe vent arrière

  Affiche l'équivalent CSS Tailwind, le cas échéant.

1. 1

   Ajustez les curseurs

   Faites glisser les curseurs de décalage, de flou et de répartition pour façonner l'ombre. Regardez la mise à jour de l'aperçu en temps réel.

2. 2

   Choisissez une couleur

   Cliquez sur le sélecteur de couleurs pour choisir la couleur de l'ombre et utilisez le curseur d'opacité pour contrôler la transparence.

3. 3

   Basculer l'encart (facultatif)

   Activez Incrustation pour créer un effet d'ombre intérieure pressée ou en relief.

4. 4

   Ajouter plus de calques (facultatif)

   Cliquez sur Ajouter une ombre pour empiler jusqu'à 5 calques pour des effets d'ombre composites complexes.

5. 5

   Ou chargez un préréglage

   Cliquez sur n’importe quelle vignette prédéfinie pour charger sa configuration dans l’éditeur.

6. 6

   Copiez le CSS

   Cliquez sur Copier pour récupérer la règle CSS complète ou simplement la valeur box-shadow.

Explore these tools that work great alongside CSS Box Shadow Generator: