Générateur d'ombre CSS
Qu'est-ce que Générateur d'ombre CSS
Un générateur d'ombre CSS vous permet de composer un box-shadow visuellement et de copier le CSS exact. Définissez le décalage horizontal et vertical, le rayon de flou, l'étendue et la couleur de l'ombre avec son opacité, et regardez l'aperçu se mettre à jour pendant que vous déplacez chaque curseur. Vous pouvez empiler plusieurs ombres sur un même élément et passer n'importe quelle couche en intérieure, si bien que la zone de sortie contient toujours une déclaration box-shadow prête à coller.
Comment utiliser
- Déplacez les curseurs de décalage pour bouger l'ombre à l'horizontale et à la verticale.
- Réglez le rayon de flou pour un bord doux et l'étendue pour agrandir ou réduire l'ombre.
- Choisissez la couleur de l'ombre, ajustez son opacité et activez intérieure pour une ombre interne.
- Ajoutez d'autres couches si besoin, puis copiez le CSS généré depuis la zone de sortie.
Quand l'utiliser
Besoin d'une ombre de carte discrète qui rende moderne plutôt que dure ? Mettez le décalage à 0px et 10px, 20px de flou, aucune étendue et une couleur noire à 25% d'opacité, puis copiez box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); directement dans votre feuille de style. Tout aussi pratique pour les états au survol des boutons, la profondeur en couches ou une ombre intérieure qui donne à un champ un aspect enfoncé.
Questions fréquentes
Que signifient les valeurs de box-shadow ?
Dans l'ordre, ce sont le décalage horizontal, le décalage vertical, le rayon de flou, l'étendue et la couleur. Les décalages positifs poussent l'ombre vers la droite et le bas, le flou adoucit le bord, et l'étendue agrandit ou réduit toute l'ombre avant qu'elle ne soit floutée.
À quoi sert la valeur d'étendue ?
L'étendue modifie la taille de l'ombre avant l'application du flou. Une valeur positive rend l'ombre plus grande que l'élément, une valeur négative la resserre, ce qui est utile pour des ombres serrées qui ne dépassent que d'un côté.
Puis-je empiler plusieurs ombres ?
Oui. Ajoutez autant de couches que vous voulez et chacune devient une ombre séparée par une virgule dans la même règle box-shadow. Empiler une ombre large et douce sous une plus proche et serrée est une manière courante d'obtenir une profondeur réaliste.
Qu'est-ce qu'une ombre intérieure ?
Une ombre intérieure est dessinée à l'intérieur de l'élément plutôt que derrière lui, si bien que la boîte paraît enfoncée ou en creux. Activez intérieure sur une couche pour la basculer, ce qui convient bien aux champs de formulaire et aux boutons pressés.
Puis-je partager cet outil avec mes données pré-remplies ?
Oui. L'URL se met à jour automatiquement pendant que vous réglez les curseurs. Copiez-la depuis la barre d'adresse ou utilisez le bouton Partager, et quiconque ouvre le lien verra votre ombre exacte prête à l'emploi.
Outils connexes
Calculateur de Ratio d'Aspect
Calculez le ratio d'aspect, trouvez la largeur ou la hauteur manquante et redimensionnez images et vidéos en gardant les proportions. Gratuit.
Générateur de Code-Barres
Générez des codes-barres EAN-13 ou Code 128 en ligne. Saisissez votre numéro ou texte et téléchargez en SVG ou PNG. Gratuit, sans inscription.
Décodeur Base64
Décodez des chaînes Base64 en texte brut instantanément. Supporte la sortie Unicode complète avec emojis. Décodeur Base64 gratuit.