Générateur CSS Box Shadow et Border Radius

Générateur CSS Box Shadow et Border Radius

🎨 Générateur gratuit de box-shadow et border-radius CSS avec aperçu en direct. Créez de belles ombres, des coins arrondis et des effets UI modernes. Code prêt à copier-coller pour le web design.

Propriété Box Shadow

La propriété CSS box-shadow ajoute des effets d’ombre autour du cadre d’un élément. Vous pouvez définir plusieurs effets séparés par des virgules. Une ombre est décrite par des décalages X et Y, un rayon de flou et de diffusion, ainsi que la couleur.

Syntaxe : box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

Paramètres de l’ombre

• Décalage X (horizontal) : valeurs positives déplacent l’ombre vers la droite, négatives vers la gauche
• Décalage Y (vertical) : valeurs positives déplacent l’ombre vers le bas, négatives vers le haut
• Rayon de flou : plus la valeur est élevée, plus le flou est important. 0 = ombre nette
• Rayon de diffusion : valeurs positives étendent l’ombre, négatives la réduisent
• Couleur : toute valeur de couleur CSS (hex, rgb, rgba, hsl)
• Inset : transforme l’ombre en ombre interne au lieu d’externe

Propriété Border Radius

La propriété border-radius arrondit les coins du bord extérieur d’un élément. Vous pouvez définir un seul rayon pour des coins circulaires, ou deux rayons pour des coins elliptiques.

Syntaxe : border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Cas d’usage courants

• Cartes : ombre subtile (0 4px 6px rgba(0,0,0,0.1)) avec rayon moyen (8px)
• Boutons : ombre colorée assortie au bouton pour un effet de profondeur
• Modales : grande ombre (0 20px 25px rgba(0,0,0,0.15)) pour un effet flottant
• Images : avatars ronds (border-radius: 50%) ou vignettes arrondies (8–16px)
• Champs de saisie : ombre inset pour l’état pressé/focus
• Design neumorphique : ombres multiples (claire et sombre) avec fond assorti

Bonnes pratiques

• Préférez des ombres subtiles : 10–20% d’opacité suffit souvent
• Décalage Y > X : imite une lumière naturelle venant d’en haut
• Flou plus grand pour l’élévation : plus de flou = effet plus « haut »
• Harmonisez la couleur : utilisez la couleur de l’élément avec une faible opacité
• Performance : évitez d’animer box-shadow, préférez opacity ou transform

Styles d’ombre populaires

• Material Design : 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM : 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD : 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG : 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap : 0 0.5rem 1rem rgba(0,0,0,0.15)

Motifs de Border Radius

• Aucun (0px) : angles vifs, style minimaliste moderne
• Petit (4px) : léger arrondi pour champs et boutons
• Moyen (8px) : standard pour cartes et conteneurs
• Grand (16px+) : rendu plus doux et accueillant
• Pilule (999px ou 50%) : extrémités arrondies pour tags/badges
• Cercle (50%) : avatars, boutons d’icône (nécessite un élément carré)

Techniques avancées

• Ombres multiples : combinez des ombres pour des effets superposés
• Effet glow : 0 0 20px [couleur] sans décalage
• Neumorphisme : ombre claire en haut-gauche, ombre sombre en bas-droite
• Anneaux de focus : ombre colorée pour l’accessibilité (0 0 0 3px rgba(couleur,0.5))
• Effet 3D : ombres multiples avec décalage et flou croissants

Compatibilité navigateur

Box-shadow et border-radius sont pris en charge par tous les navigateurs modernes. Pour IE8 et antérieurs, utilisez des préfixes (-webkit-box-shadow, -moz-box-shadow), même si cela est rarement nécessaire aujourd’hui.

💡 Astuce pro : pour les effets hover, n’animez pas box-shadow directement (c’est coûteux). Créez plutôt l’ombre sur un pseudo-élément (::before ou ::after) et animez son opacité. Vous obtenez le même rendu avec de bien meilleures performances, surtout sur mobile !