Générateur d’ombres de boîte
Générer des propriétés CSS box-shadow
Calques d’ombre
Ombre 1
Ombres prédéfinies
Conseils sur les ombres
Les valeurs de décalage positives déplacent les ombres vers le bas et la droite, les valeurs négatives vers le haut et la gauche.
Le rayon de flou adoucit l’ombre ; des valeurs plus élevées créent des ombres plus diffuses.
Le rayon d’étalement agrandit ou réduit la taille de l’ombre.
Les ombres internes créent des effets de profondeur à l’intérieur des éléments.
Plusieurs ombres peuvent être superposées pour créer des effets d’éclairage complexes.
Des valeurs d’opacité plus faibles créent des ombres plus discrètes et réalistes.
Aperçu en direct
Échelle de l’aperçu : 100%
Déclaration CSS
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);Classe CSS
.shadow {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}Tailwind CSS (approximation)
shadowIl s’agit d’une suggestion de style. Les décalages, couleurs, ombres internes et calques multiples personnalisés nécessitent le CSS généré.
Ajustez un calque ou essayez un préréglage. L’aperçu se met à jour au fil de vos modifications.
À propos du générateur d'ombres de boîte
Notre générateur d'ombres de boîte CSS gratuit vous aide à créer des effets d'ombre professionnels avec un contrôle visuel complet. Réglez le décalage, le rayon de flou, le rayon d'étalement, la couleur et l'opacité à l'aide de curseurs intuitifs et voyez le résultat se mettre à jour en temps réel. Superposez plusieurs ombres pour obtenir des effets de profondeur complexes qui font ressortir vos éléments d'interface.
Les ombres sont essentielles pour établir la hiérarchie visuelle et la profondeur dans les interfaces web modernes. Une box-shadow bien pensée peut donner l'impression que les cartes flottent au-dessus de la page, rendre les boutons interactifs et faire ressortir les éléments de navigation du fond. Cet outil vous évite les tâtonnements de l'écriture manuelle des valeurs de box-shadow.
Le générateur prend en charge les ombres extérieures et les ombres internes (inset), plusieurs couches d'ombres, et inclut 6 modèles prédéfinis pour les styles d'ombre courants. Le résultat est fourni sous forme de code CSS avec un bouton de copie en un clic, accompagné de suggestions approximatives de classes utilitaires Tailwind CSS. Tout le traitement s'effectue dans votre navigateur, sans qu'aucune donnée ne soit envoyée à un serveur.
Fonctionnalités principales
- Plusieurs couches d'ombres pouvant être ajoutées, supprimées et configurées individuellement
- Curseurs précis pour le décalage X, le décalage Y, le rayon de flou et le rayon d'étalement
- Sélecteur de couleur avec saisie hexadécimale et opacité réglable pour chaque couche d'ombre
- Option d'ombre interne (inset) pour créer de la profondeur intérieure et des effets de relief
- 6 modèles d'ombre prédéfinis : Subtile, Moyenne, Grande, Très grande, Interne et Multiple
- Générateur d'ombres aléatoires pour découvrir des combinaisons d'ombres créatives
- Aperçu en direct en temps réel avec couleur d'élément personnalisable
- Copie dans le presse-papiers en un clic avec un code CSS propre
- Sorties dans d'autres formats, dont une classe CSS et un équivalent utilitaire Tailwind CSS approximatif
- Prise en charge complète du mode sombre pour éditer confortablement dans toutes les conditions d'éclairage
Comment utiliser le générateur d'ombres de boîte
- Ajoutez des couches d'ombre : partez de l'ombre par défaut ou cliquez sur Ajouter pour créer des couches supplémentaires et obtenir des effets complexes.
- Réglez les propriétés de l'ombre : utilisez les curseurs pour définir le décalage X/Y, le rayon de flou, le rayon d'étalement, la couleur et l'opacité de chaque couche d'ombre.
- Activez l'ombre interne : cochez la case Inset sur n'importe quelle couche d'ombre pour créer un effet d'ombre intérieure plutôt qu'extérieure.
- Prévisualisez le résultat : observez l'élément d'aperçu en direct pour voir exactement l'aspect de votre ombre. Modifiez la couleur de l'élément d'aperçu si nécessaire.
- Essayez les modèles : cliquez sur l'un des 6 modèles prédéfinis pour appliquer rapidement un style d'ombre courant comme point de départ.
- Copiez le CSS : cliquez sur le bouton Copier pour copier la déclaration CSS box-shadow complète dans votre presse-papiers.
Cas d’usage
- Élévation des cartes : ajoutez de la profondeur aux composants de type carte pour qu'ils semblent flotter au-dessus de l'arrière-plan de la page.
- États de survol des boutons : créez des transitions d'ombre pour des boutons qui réagissent visuellement à l'interaction de l'utilisateur.
- Style des modales et boîtes de dialogue : appliquez de grandes ombres douces aux modales et aux boîtes de dialogue pour les séparer nettement de l'arrière-plan.
- Menus déroulants de navigation : stylisez les menus déroulants et les popovers avec des ombres qui traduisent la superposition et la profondeur.
- Effets de focus des champs : utilisez des ombres colorées comme indicateurs de focus pour les champs de formulaire et les éléments interactifs.
- Effets internes (inset) : créez des aspects enfoncés ou en relief pour les boutons à bascule, les états actifs et les éléments décoratifs.
- Design néomorphique : combinez plusieurs ombres claires et sombres pour obtenir l'esthétique populaire du soft UI.
- Encadrement d'images : ajoutez des ombres discrètes aux images et aux conteneurs de médias pour un rendu de galerie soigné.
Questions fréquentes
Cet outil est-il gratuit ?
Oui, le générateur d'ombres de boîte est entièrement gratuit, sans limite sur le nombre d'ombres que vous pouvez créer. Aucune inscription ni aucun paiement n'est requis.
Mes données sont-elles en sécurité ?
Toute la génération et la prévisualisation des ombres se font entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur externe : vos configurations et votre code CSS restent donc totalement privés.
Quelle est la différence entre le rayon de flou et le rayon d'étalement ?
Le rayon de flou contrôle le degré de douceur ou de diffusion de l'ombre : plus la valeur est élevée, plus le dégradé est progressif. Le rayon d'étalement agrandit (valeurs positives) ou réduit (valeurs négatives) la taille de l'ombre par rapport à l'élément.
Puis-je utiliser plusieurs ombres sur un même élément ?
Oui, CSS accepte plusieurs box-shadow séparées par des virgules. Cet outil vous permet d'ajouter plusieurs couches d'ombre et les combine automatiquement en une seule déclaration box-shadow.
Qu'est-ce qu'une ombre interne (inset) ?
Une ombre interne (inset) s'affiche à l'intérieur de l'élément plutôt qu'à l'extérieur, ce qui donne un aspect creusé ou enfoncé. Elle est couramment utilisée pour les champs de saisie, les états actifs des boutons et les designs néomorphiques.
La propriété box-shadow est-elle prise en charge par tous les navigateurs ?
Oui, la propriété box-shadow est entièrement prise en charge par tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera. Aucun préfixe constructeur n'est nécessaire.
Astuces et bonnes pratiques
- Gardez des ombres discrètes : une faible opacité (5-15 %) et un flou modéré créent des ombres réalistes et professionnelles qui n'écrasent pas le design.
- Utilisez un étalement négatif : un léger rayon d'étalement négatif rend les ombres plus resserrées et plus concentrées sous l'élément.
- Superposez plusieurs ombres : combinez une ombre nette et sombre avec une ombre plus large et plus claire pour une profondeur naturelle, proche de l'éclairage réel.
- Respectez votre source de lumière : gardez des directions de décalage cohérentes dans tout votre design pour simuler une source de lumière unique et cohérente.
- Pensez aux performances : de grandes valeurs de flou sur de nombreux éléments peuvent nuire aux performances de rendu, surtout sur mobile.
- Utilisez les ombres pour la hiérarchie : une élévation plus forte (décalage et flou plus grands) doit indiquer les éléments situés plus près de l'utilisateur dans la pile visuelle.