Générateur de Box Shadow CSS
Générateur en ligne gratuit de box-shadow CSS. Créez visuellement de belles ombres avec décalage, flou, étalement, couleur et inset ajustables. Aperçu en direct et copie instantanée.
Qu'est-ce que CSS box-shadow ?
CSS box-shadow est une propriété CSS qui ajoute des effets d'ombre autour du cadre d'un élément. Elle vous permet de créer des ombres portées, des ombres internes et plusieurs couches d'ombre en spécifiant le décalage, le rayon de flou, le rayon d'étalement et les valeurs de couleur.
Quels sont les paramètres de box-shadow ?
La propriété box-shadow accepte plusieurs valeurs : décalage horizontal (X), décalage vertical (Y), rayon de flou, rayon d'étalement, couleur et le mot-clé optionnel inset. Vous pouvez également spécifier plusieurs ombres séparées par des virgules.
Qu'est-ce que le mot-clé inset ?
Le mot-clé inset change l'ombre d'une ombre externe (ombre portée) à une ombre interne. Lorsque inset est spécifié, l'ombre est dessinée à l'intérieur de la bordure de l'élément au lieu de l'extérieur, créant un effet d'insertion.
Qu'est-ce que le rayon de flou ?
Le rayon de flou détermine le degré de flou du bord de l'ombre. Une valeur de 0 crée un bord net et solide. Des valeurs plus grandes créent une ombre plus diffuse et douce qui s'étend plus loin de l'élément.
Qu'est-ce que le rayon d'étalement ?
Le rayon d'étalement agrandit ou rétrécit la taille de l'ombre. Les valeurs positives rendent l'ombre plus grande que l'élément, tandis que les valeurs négatives la rendent plus petite. Cela affecte l'ombre avant que le flou ne soit appliqué.
Comment créer plusieurs ombres ?
Vous pouvez créer plusieurs ombres en séparant chaque définition d'ombre par une virgule. Chaque ombre peut avoir des valeurs de décalage, de flou, d'étalement et de couleur différentes. Les ombres sont appliquées dans l'ordre où elles sont déclarées, la première ombre étant au-dessus.
Puis-je utiliser des couleurs RGBA pour les ombres ?
Oui, vous pouvez utiliser n'importe quel format de couleur CSS y compris RGBA, HSLA, HEX ou les couleurs nommées. RGBA et HSLA sont particulièrement utiles pour créer des ombres semi-transparentes qui se fondent naturellement avec les arrière-plans.
Comment copier le code CSS généré ?
Cliquez simplement sur le bouton "Copier le code" dans l'interface du générateur. Le code CSS sera copié dans votre presse-papiers et pourra être collé directement dans votre feuille de style ou fichier HTML.
box-shadow est-il pris en charge dans tous les navigateurs ?
Oui, box-shadow est pris en charge dans tous les navigateurs modernes y compris Chrome, Firefox, Safari, Edge et Opera. Il fait partie de CSS3 depuis 2011 et offre une excellente compatibilité avec les navigateurs.
box-shadow affecte-t-il les performances ?
box-shadow a un impact minimal sur les performances des navigateurs modernes. Cependant, l'utilisation de plusieurs ombres complexes avec un grand rayon de flou sur de nombreux éléments peut affecter les performances de rendu, en particulier sur les appareils mobiles.
Quels sont les cas d'utilisation courants de box-shadow ?
Les utilisations courantes incluent la création d'effets d'élévation de carte, l'ajout de profondeur aux boutons, la création de champs de formulaire insérés, la mise en œuvre des ombres material design et l'ajout d'une séparation visuelle entre les éléments qui se chevauchent.
Puis-je animer box-shadow ?
Oui, box-shadow peut être animé en utilisant des transitions ou des animations CSS. Cependant, l'animation de box-shadow peut être intensive en termes de performances. Pour de meilleures performances, envisagez d'utiliser des pseudo-éléments avec des transitions d'opacité à la place.