Générateur d'ombre de boîte CSS

Qu'est-ce que l'ombre de boîte CSS ?

CSS box-shadow est une propriété qui ajoute des effets d'ombre autour du cadre d'un élément. Vous pouvez définir plusieurs effets séparés par des virgules. Notre générateur d'ombre de boîte facilite la création et la personnalisation des ombres avec un éditeur visuel. Ajustez les décalages, le flou, l'étalement, la couleur et créez des ombres internes avec aperçu en temps réel.

Propriétés de l'ombre de boîte

• Décalage horizontal (X): Déplace l'ombre à gauche (négatif) ou à droite (positif)
• Décalage vertical (Y): Déplace l'ombre vers le haut (négatif) ou vers le bas (positif)
• Rayon de flou: Des valeurs plus élevées créent plus de flou. 0 crée des bords nets
• Rayon d'étalement: Les valeurs positives agrandissent l'ombre, les valeurs négatives la réduisent
• Couleur de l'ombre: Couleur de l'ombre avec opacité optionnelle (utilisez hex avec alpha ou rgba)
• Ombre interne: Change l'ombre de externe à interne (à l'intérieur de l'élément)

Comment utiliser

1. Ajustez les décalages horizontal et vertical pour positionner l'ombre
2. Définissez le rayon de flou pour la douceur et le rayon d'étalement pour la taille
3. Choisissez la couleur de l'ombre et activez l'option interne si nécessaire
4. Ajoutez plusieurs ombres pour des effets superposés, puis copiez le code CSS

Caractéristiques principales

• Aperçu en direct : voyez votre ombre en temps réel lors de l'ajustement des valeurs
• Ombres multiples : superposez jusqu'à 5 ombres pour des effets complexes
• Ombres prédéfinies : démarrez rapidement avec 6 styles d'ombre courants
• Ombres internes : créez des ombres internes pour des effets de profondeur
• Copier le code CSS : copie en un clic de la propriété box-shadow complète