Générateur de box-shadow CSS
Concevez des ombres CSS visuellement avec plusieurs calques, des ombres intérieures, du flou, de l'étalement et de la couleur. Aperçu en direct, export CSS, SCSS ou Tailwind.
Chargement de Générateur de box-shadow CSS…
Vos fichiers ne quittent jamais votre appareil
Comment utiliser Générateur de box-shadow CSS
- 1
Ouvrez Générateur de box-shadow CSS sur cette page. Il se charge directement dans votre navigateur.
- 2
Ajoutez votre fichier, texte ou valeurs et ajustez les réglages.
- 3
Copiez ou téléchargez le résultat. Rien n'est envoyé ni stocké.
À propos de cet outil
La propriété CSS box-shadow donne de la profondeur aux cartes, boutons et images, mais écrire les valeurs à la main relève de la devinette. Ce générateur de box-shadow vous permet de concevoir l'ombre avec des curseurs et de la voir sur un bloc d'aperçu en direct, puis de copier un code propre en CSS, SCSS ou en entrée de configuration Tailwind.
Comment créer une ombre portée
- Réglez le décalage horizontal et vertical pour déplacer l'ombre.
- Augmentez le flou pour un bord plus doux et ajustez l'étalement pour l'agrandir ou la réduire.
- Choisissez la couleur et l'opacité.
- Cochez inset pour placer l'ombre à l'intérieur du bloc.
- Ajoutez des calques, dupliquez-les ou supprimez-les, et activez ou désactivez chacun.
- Changez la couleur du bloc et le fond de l'aperçu pour coller à votre design, puis copiez le code.
Syntaxe de box-shadow
box-shadow: [inset] offset-x offset-y blur spread color;
Par exemple box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15); donne une ombre douce juste sous l'élément. Plusieurs ombres peuvent être combinées, séparées par des virgules, et la première est dessinée au-dessus.
Recettes d'ombres
- Carte douce : petit décalage, grand flou, faible opacité, par exemple 0 4px 12px avec du noir à 10 à 15 pour cent.
- Profondeur réaliste : deux calques, un plus sombre et serré près de l'élément, et un large très léger plus loin.
- Bouton enfoncé : une ombre intérieure sur le bord supérieur.
- Halo ou néon : aucun décalage, grand flou et une ombre de couleur vive ; superposez deux couleurs pour plus d'intensité.
- Ombre ciblée : un étalement négatif garde l'ombre plus étroite que le bloc, pour qu'elle n'apparaisse qu'en dessous.
Conseils
- Gardez une seule direction de lumière dans toute l'interface, généralement du haut, pour que toutes les ombres aillent dans le même sens.
- Teintez vos ombres avec une version sombre de la couleur de fond plutôt qu'avec du noir pur pour un rendu plus naturel.
- Surveillez les performances : de très grands flous sur beaucoup d'éléments peuvent ralentir le défilement sur les téléphones anciens.
Combinez les ombres avec les coins arrondis du générateur de border-radius et les fonds du générateur de dégradés CSS.
Questions fréquentes
Que signifient les valeurs de box-shadow ?
Dans l'ordre : décalage horizontal, décalage vertical, rayon de flou, rayon d'étalement et couleur. Ajoutez le mot inset au début pour dessiner l'ombre à l'intérieur de l'élément.
Comment ajouter plusieurs ombres ?
Ajoutez un calque dans le générateur. En CSS, plusieurs ombres s'écrivent dans une seule propriété box-shadow, séparées par des virgules.
Qu'est-ce qu'une ombre inset ?
Une ombre dessinée à l'intérieur de la bordure de l'élément plutôt qu'à l'extérieur, souvent utilisée pour les boutons enfoncés et les champs de saisie.
Puis-je obtenir l'ombre sous forme de classe Tailwind ?
Oui. L'export Tailwind fournit une entrée boxShadow pour tailwind.config.js, pour utiliser l'ombre comme classe personnalisée, par exemple shadow-custom.
À quoi sert un étalement négatif ?
Il rend l'ombre plus petite que l'élément, de sorte qu'elle ne dépasse que du côté du décalage, ce qui donne une ombre plus serrée et plus ciblée.
Pourquoi mon ombre paraît-elle trop sombre ?
Baissez l'opacité, augmentez le flou ou utilisez une teinte sombre de votre couleur de fond au lieu du noir pur.