Générateur d'Ombre de Boîte
Box Shadow Generator est un outil CSS visuel gratuit qui vous aide à créer de superbes ombres de boîte pour vos éléments Web sans écrire de code manuellement. Que vous ayez besoin d'une ombre portée subtile pour un composant de carte, d'un effet de lueur intense pour un bouton CTA ou de plusieurs ombres superposées pour un effet 3D spectaculaire, ce générateur vous donne un contrôle total sur chaque paramètre d'ombre. Ajustez le décalage horizontal et vertical, le rayon de flou, le rayon d'étalement, la couleur et l'opacité avec des curseurs intuitifs et des sélecteurs de couleurs. Basculez entre les ombres incrustées et initiales. Ajoutez plusieurs calques d'ombre et voyez le résultat en temps réel sur un élément d'aperçu en direct. L'outil génère un code CSS propre et inter-navigateurs prêt à être copié et collé dans votre feuille de style.
Ce Qui Est
La propriété CSS box-shadow ajoute des effets d'ombre autour du cadre d'un élément. Une ombre de boîte peut être décrite par des décalages X et Y par rapport à l'élément, un rayon de flou et d'étalement, une couleur et si l'ombre apparaît à l'intérieur ou à l'extérieur de l'élément. La syntaxe de l'ombre de la boîte: boîte-ombre: décalage-décalage x-flou y-étalement du rayon-encart de couleur du rayon; Comprendre chaque paramètre: - offset-x: Distance horizontale de l'ombre par rapport à l'élément. Les valeurs positives se déplacent vers la droite, les valeurs négatives se déplacent vers la gauche. - offset-y: Distance verticale. Les valeurs positives descendent, les valeurs négatives montent. - flou-rayon: À quel point le bord de l'ombre est flou. 0 signifie une arête vive, des valeurs plus élevées créent des ombres plus douces. Cela ne peut pas être négatif. - rayon d'étalement: Élargit ou contracte la taille de l'ombre. Les valeurs positives rendent l'ombre plus grande que l'élément, les valeurs négatives la rendent plus petite. - couleur: Toute valeur de couleur CSS (hexadécimal, rvb, rgba, hsl, couleurs nommées). L'utilisation de rgba avec transparence alpha crée des ombres réalistes. - encart (facultatif): Lorsqu'elle est présente, l'ombre est dessinée à l'intérieur de l'élément plutôt qu'à l'extérieur. Pourquoi utiliser box-shadow dans la conception web: - Profondeur et élévation: Les ombres créent une hiérarchie visuelle en donnant l'impression que les éléments flottent au-dessus de la surface - Conformité à la conception des matériaux: le système de conception des matériaux de Google utilise la profondeur des ombres pour indiquer la hiérarchie des composants - États de mise au point et de survol: Les ombres fournissent un retour visuel sur les éléments interactifs - Vernis esthétique: Même les ombres subtiles rendent les interfaces plus raffinées et professionnelles - Différenciation des cartes: Les ombres aident à séparer les cartes des arrière-plans dans les mises en page basées sur les cartes Le générateur prend en charge plusieurs calques d'ombre (séparés par des virgules), vous permettant d'empiler plusieurs effets d'ombre sur un seul élément pour des résultats plus réalistes ou spectaculaires.
Comment utiliser
- Activez ou désactivez les calques d'ombre individuels à l'aide des cases à cocher. Commencez avec un calque d'ombre et ajoutez - en d'autres au besoin en cliquant sur le bouton "Ajouter une ombre". Chaque couche peut être configurée indépendamment.
- Ajustez le décalage horizontal (décalage-x) à l'aide du curseur. Les valeurs positives déplacent l'ombre vers la droite de l'élément, les valeurs négatives vers la gauche. Regardez la mise à jour de l'aperçu en temps réel lorsque vous faites glisser.
- Définissez le décalage vertical (décalage-y) pour contrôler la distance au-dessus ou au-dessous de l'élément où l'ombre apparaît. Les valeurs positives déplacent l'ombre vers le bas, simulant une source de lumière d'en haut.
- Augmentez le rayon de flou pour des ombres plus douces et plus diffuses. Une valeur de 0 produit une ombre nette; des valeurs comprises entre 5 et 20 pixels créent des ombres d'aspect naturel pour la plupart des éléments de l'interface utilisateur. Des valeurs très élevées (30px+) créent des effets de lueur.
- Ajustez le rayon d'étalement pour agrandir ou réduire l'ombre. Les valeurs négatives peuvent resserrer l'ombre autour de l'élément, ce qui est utile pour créer des effets de bord nets. Les valeurs positives rendent l'ombre plus grande que l'élément lui-même.
- Choisissez la couleur de votre ombre à l'aide du sélecteur de couleurs. Activez le curseur d'opacité pour ajuster la transparence — les ombres réalistes utilisent généralement rgba(0, 0, 0, 0.1-0.3). Essayez différentes couleurs pour des effets de lueur créatifs (par exemple, une lueur bleue pour les boutons néon).
- Activez la case à cocher "Encart" pour basculer entre les ombres extérieures et extérieures. Des ombres incrustées sont dessinées à l'intérieur de l'élément, créant une apparence enfoncée ou en retrait utile pour les entrées de formulaire et les boutons enfoncés.
- Copiez le code CSS généré à partir du panneau de sortie en un seul clic. Le code inclut tous les préfixes des fournisseurs pour une compatibilité entre navigateurs. Collez-le directement dans votre feuille de style ou votre attribut de style en ligne.
Exemples
Entrée: X: 0 Y: 4 pixels Flou: 12 pixels Étalement: 0 Couleur: rgba (0,0,0,0. 15)
Processus: Combine offset + blur + color → CSS box-shadow syntax
Résultat: boîte-ombre: 0 4 pixels 12 pixels 0 rvba(0,0,0,0. 15);
Entrée: X:2 pixels Y: 2 pixels Flou: 8 pixels Étalement:-2 pixels Couleur:#3b82f6
Processus: Multi-shadow layering → Offset calculation
Résultat: boîte-ombre: 2 pixels 2 pixels 8 pixels-2 pixels #3b82f6;
Recherches Connexes
Les gens recherchent aussi : générateur d'ombre de boîte, ombre de boîte css, générateur d'ombres, ombre css.
générateur d'ombre de boîteombre de boîte cssgénérateur d'ombresombre css
Questions Fréquemment Posées
Quelle est la différence entre box-shadow et text-shadow?
box-shadow s'applique aux éléments de niveau bloc (divs, sections, cartes, boutons) créant des ombres autour de la boîte rectangulaire de l'élément. text-shadow s'applique au contenu textuel d'un élément, créant des ombres derrière les formes de lettres réelles. Ils utilisent une syntaxe similaire (offset-x, offset-y, flou, couleur) mais box-shadow a des fonctionnalités supplémentaires comme le rayon d'étalement et les mots-clés d'encart.
Puis-je créer plusieurs ombres sur un élément?
Oui! Les ombres de plusieurs boîtes sont définies par des valeurs d'ombre séparées par des virgules. L'outil prend en charge un nombre illimité de calques d'ombre. Les ombres multiples permettent des effets plus réalistes — par exemple, en combinant une ombre sombre serrée pour une profondeur immédiate avec une ombre plus douce et plus grande pour l'ombrage ambiant. L'ordre compte: la première ombre de la liste apparaît en haut, avec les ombres suivantes superposées derrière elle.
Quelle couleur dois-je utiliser pour des ombres réalistes?
Pour des résultats plus réalistes, utilisez une version sombre de votre couleur d'arrière-plan avec une faible opacité. Le noir pur à 15-25% d'opacité (rgba (0,0,0,0.15-0. 25)) fonctionne bien sur les arrière-plans clairs. Sur les arrière-plans colorés, utilisez une nuance plus foncée de la couleur d'arrière-plan. Évitez les ombres complètement opaques — elles n'ont pas l'air naturelles. Pour les effets de lueur colorée, utilisez des couleurs vives avec une opacité de 30 à 60%.
Box-shadow est - il pris en charge dans tous les navigateurs?
Oui, box-shadow a un excellent support de navigateur. Il fonctionne dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge et Opera sans préfixe de fournisseur. Pour les très anciens navigateurs (IE 8 et versions antérieures), box-shadow n'est pas pris en charge, mais ces navigateurs ont une part de marché négligeable aujourd'hui. Le CSS généré inclut le préfixe-webkit-pour une compatibilité maximale.
Comment créer une ombre de style Material Design?
La conception matérielle utilise des valeurs d'ombre spécifiques pour différents niveaux d'élévation. Valeurs communes: Niveau 1: 0 1px 3px rvba(0,0,0,0.12), 0 1px 2px rvba(0,0,0,0.24). Niveau 2: 0 3 pixels 6 pixels rvb (0,0,0,0.16), 0 3 pixels 6 pixels rvb (0,0,0,0. 23). Niveau 3: 0 10 pixels 20 pixels rvb (0,0,0,0. 19) , 0 6 pixels 6 pixels rvb (0,0,0,0. 23). La superposition de deux ombres par niveau (une plus serrée, une diffuse) crée l'effet de profondeur caractéristique de la conception matérielle.