Générateur de Box Shadow CSS

Générateur de Box Shadow CSS

Le Générateur de Box Shadow CSS vous permet de concevoir visuellement des effets box-shadow et de copier instantanément le code CSS prêt pour la production. Superposez plusieurs couches d'ombre, choisissez parmi des préréglages sélectionnés inspirés de Material Design, Tailwind CSS et Neumorphism, ou faites glisser directement sur l'aperçu pour positionner votre ombre. Tout fonctionne dans votre navigateur — votre code ne quitte jamais la page.

Comment utiliser le générateur de box shadow CSS

1. Ajuster les contrôles d'ombre — Utilisez les curseurs pour définir le décalage horizontal (X), le décalage vertical (Y), le rayon de flou et le rayon de propagation. Vous pouvez également faire glisser directement sur la zone d'aperçu pour repositionner l'ombre de manière intuitive.
2. Choisir la couleur et l'opacité — Choisissez une couleur d'ombre avec le sélecteur de couleurs et affinez la transparence avec le curseur d'opacité. L'aperçu se met à jour en temps réel.
3. Ajouter plusieurs couches ou préréglages — Cliquez sur + Ajouter une couche d'ombre pour empiler les ombres pour une profondeur réaliste. Ou sélectionnez un préréglage (Material, Tailwind, Neumorphism, etc.) pour commencer avec un design éprouvé.
4. Copier le CSS — Cliquez sur Copier pour récupérer le code box-shadow généré et le coller directement dans votre feuille de style.

Comprendre la syntaxe box-shadow

Conseils pour des Box Shadows professionnelles

• Superposer plusieurs ombres — Les objets du monde réel projettent des ombres complexes. L'utilisation de 2 à 3 couches (une couche ambiante douce + une couche de lumière principale plus nette) produit des résultats beaucoup plus réalistes qu'une seule ombre.
• Utiliser une faible opacité — Les ombres avec une opacité de 8 à 20 % paraissent naturelles. Évitez les ombres noires à haute opacité, qui peuvent paraître dures et démodées.
• Faire correspondre la direction de la lumière — Gardez des décalages d'ombre cohérents dans toute votre interface utilisateur pour simuler une source de lumière unique. Des ombres incohérentes brisent l'illusion visuelle.
• Ombres colorées — Au lieu du noir, essayez d'utiliser une nuance plus foncée de la couleur d'arrière-plan de l'élément pour un aspect plus cohérent et moderne.
• Propagation négative — Une valeur de propagation négative rétrécit l'ombre par rapport à l'élément, créant une ombre de contact subtile qui ancre les éléments sans bords visibles.

Styles d'ombre populaires expliqués

• Élévation Material Design — Utilise deux couches d'ombre : une ombre ambiante plus douce et une ombre principale plus nette. Différents niveaux d'élévation (1 à 5) augmentent progressivement le décalage et le flou.
• Utilitaires Tailwind CSS — Tailwind fournit les classes shadow, shadow-md, shadow-lg, shadow-xl et shadow-2xl, chacune utilisant des ombres à deux couches optimisées pour les cas d'utilisation courants de cartes et de modales.
• Neumorphism — Crée un effet de plastique extrudé doux à l'aide de deux ombres opposées (une claire, une sombre). Fonctionne mieux sur des arrière-plans gris clair où les deux ombres sont visibles.
• Glassmorphism — Associe une ombre subtile à un flou backdrop-filter et à des arrière-plans semi-transparents. L'ombre ajoute de la profondeur sous l'effet de verre dépoli.

Foire Aux Questions

Qu'est-ce que la propriété CSS box-shadow ?

La propriété CSS box-shadow ajoute des effets d'ombre autour du cadre d'un élément. Elle accepte des valeurs pour le décalage horizontal, le décalage vertical, le rayon de flou, le rayon de propagation et la couleur. Plusieurs ombres peuvent être séparées par des virgules pour créer des effets de profondeur superposés.

Comment créer plusieurs ombres de boîte en CSS ?

Plusieurs ombres de boîte sont créées en séparant chaque définition d'ombre par une virgule. Par exemple : box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Chaque ombre est rendue au-dessus de la précédente, la première ombre apparaissant tout en haut.

Quelle est la différence entre box-shadow et drop-shadow ?

box-shadow applique une ombre à la boîte rectangulaire d'un élément, tandis que filter: drop-shadow() suit la forme réelle, y compris les zones transparentes. box-shadow prend en charge le rayon de propagation et le mode intérieur (inset), ce que drop-shadow ne fait pas. Pour les éléments rectangulaires standard, box-shadow est plus couramment utilisé et plus performant.

Qu'est-ce qu'une ombre de boîte intérieure (inset) ?

Une ombre de boîte intérieure apparaît à l'intérieur de l'élément plutôt qu'à l'extérieur. Elle est créée en ajoutant le mot-clé inset avant les valeurs d'ombre. Les ombres intérieures sont couramment utilisées pour les effets de boutons enfoncés, le style des champs de saisie et la création d'apparences en creux ou gravées.

Quelles sont les bonnes valeurs de box-shadow pour un effet de carte subtil ?

Une ombre de carte subtile populaire utilise deux couches : 0 1px 3px rgba(0,0,0,0.12) pour l'ombre proche et 0 1px 2px rgba(0,0,0,0.24) pour la définition. Tailwind CSS utilise 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) pour son utilitaire d'ombre par défaut.