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

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

L'ombre de boîte CSS 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 intérieures avec aperçu en temps réel.

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

• Décalage horizontal (X): Déplace l'ombre vers la gauche (négatif) ou vers la droite (positif)
• Décalage vertical (Y): Déplace l'ombre vers le haut (négatif) ou vers le bas (positif)
• Rayon de flou: Les 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 d'ombre: Couleur d'ombre avec opacité optionnelle (utilisez hex avec alpha ou rgba)
• Ombre intérieure: Change l'ombre de l'extérieur à l'intérieur (à l'intérieur de l'élément)

Comment utiliser

• Ajustez les décalages horizontaux et verticaux pour positionner l'ombre
• Définissez le rayon de flou pour la douceur de l'ombre et le rayon d'étalement pour la taille
• Choisissez la couleur de l'ombre et basculez l'ombre intérieure si nécessaire
• Ajoutez plusieurs ombres pour des effets en couches, puis copiez le code CSS

Caractéristiques principales

• Aperçu en direct : voyez votre ombre en temps réel à mesure que vous ajustez les valeurs
• Ombres multiples : superposez jusqu'à 5 ombres pour des effets complexes
• Ombres prédéfinies : démarrage rapide avec 6 styles d'ombre courants
• Ombres intérieures : créez des ombres intérieures pour des effets de profondeur
• Copier le code CSS : copie en un clic de la propriété box-shadow complète