Générateur de ombres de boîtes
Outil de génération de styles CSS pour les ombres de boîtes en ligne gratuit, avec prise en charge de la prise en compte en temps réel
Syntaxe CSS box-shadow
La propriété CSS box-shadow ajoute des effets d'ombre autour d'un élément. Syntaxe : box-shadow: [inset] décalage-x décalage-y flou étalement couleur. Plusieurs ombres peuvent être séparées par des virgules. Utilisez l'éditeur visuel pour ajuster les valeurs et voir le résultat en temps réel.
Comment utiliser le générateur d'ombre de boîte
Ajustez les curseurs pour le décalage X, le décalage Y, le rayon de flou et le rayon d'étalement. Choisissez une couleur d'ombre et activez l'option inset. Le code CSS généré se met à jour en temps réel et peut être copié dans le presse-papiers.
▶Quelle est la différence entre flou et étalement ?
Le flou contrôle la douceur des bords de l'ombre (0 = bord net, valeurs plus élevées = plus doux). L'étalement étend ou contracte l'ombre dans toutes les directions. Un étalement positif rend l'ombre plus grande que l'élément.
▶Puis-je ajouter plusieurs ombres ?
Oui, CSS prend en charge plusieurs ombres séparées par des virgules : box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);. Combinez des ombres subtiles pour un effet de profondeur plus réaliste.
▶Que fait l'ombre inset ?
Une ombre inset apparaît à l'intérieur de l'élément au lieu de l'extérieur. Elle crée une impression que l'élément est enfoncé vers l'intérieur, comme un champ de texte ou un bouton enfoncé.
Si cet outil vous a été utile, pensez à m’offrir un café.
Achetez-moi un café.