Générateur d'ombres CSS
Créez visuellement les valeurs d'ombre portée CSS : ajustez le décalage, le flou, l'étendue et la couleur grâce à un aperçu en direct.
Sortie CSS
box-shadow: 0px 4px 12px 0px #00000026;Pourquoi utiliser le générateur d'ombres portées PixConvert ?
Éditeur visuel d'ombres portées — plus besoin de deviner les valeurs, il suffit de glisser et de prévisualiser.
Aperçu en direct
Visualisez votre ombre sur un aperçu réaliste de la carte — les mises à jour sont instantanées à chaque modification du curseur.
Plusieurs couches d'ombre
Superposez plusieurs calques d'ombre pour obtenir des effets de profondeur avancés. Chaque calque est contrôlé indépendamment.
Ombres incrustées
Activez ou désactivez le mode d'insertion pour les effets de bouton pressé et les styles de lueur interne.
Couleur + Opacité
Choisissez la couleur de l'ombre à l'aide d'un curseur d'opacité dédié. La sortie utilise le format rgba pour une transparence précise.
Sortie CSS prête
Le résultat est une chaîne de valeur CSS box-shadow valide — à coller directement dans votre feuille de style ou votre jeton de conception.
100% privé
Solution purement côté client — aucun serveur, aucune collecte de données.
Cas d'utilisation de Box Shadow
Les ombres créent de la profondeur et une hiérarchie dans la conception d'interfaces utilisateur.
Élévation de carte
Créez des ombres portées de style Material Design pour les cartes, les fenêtres modales et les panneaux.
- Échelles d'ombre d'élévation 1-24
- ombres flottantes des boutons d'action
- ombres superposées aux boîtes de dialogue
Profondeur du bouton
Ajoutez des ombres portées subtiles et des effets de pression en relief aux boutons pour un effet de profondeur 3D.
- Ombre portée discrète au survol
- Ombre portée pour l'état pressé
- Effets de lueur colorée
néomorphisme
Créez des composants d'interface utilisateur néomorphiques en utilisant des ombres claires et foncées superposées.
- couches d'ombre claire et foncée
- Éléments surélevés de l'interface utilisateur souple
- Commandes concaves encastrées
Comment créer une ombre portée ?
Ajustez le décalage X, le décalage Y, le rayon de flou et la diffusion à l'aide des curseurs. Choisissez une couleur et une opacité pour l'ombre.
Visualisez instantanément la mise à jour en aperçu direct. Copiez la valeur CSS et collez-la dans votre feuille de style.
Activez ou désactivez les ombres incrustées ou superposez plusieurs ombres pour créer des effets superposés ; le résultat est séparé par des virgules et prêt à être collé.
Explorer plus d'outils
Découvrez d'autres outils gratuits qui fonctionnent parfaitement en complément de celui-ci.
Générateur de gradient CSS
Créez visuellement des dégradés CSS personnalisés
Vérificateur de contraste
Vérifiez les rapports de contraste des couleurs pour la conformité aux WCAG
Convertisseur de couleurs
Convertissez instantanément les codes de couleur HEX, RGB et HSL
Extracteur de palette de couleurs
Extraire les couleurs dominantes de n'importe quelle image
Formateur JSON
Formatez, validez et minifiez instantanément le JSON
Testeur d'expressions régulières
Tester et déboguer en direct les expressions régulières
Foire aux questions
Explication de la propriété CSS box-shadow.
Quels sont les paramètres de l'ombre portée ?
box-shadow : [inset] décalage x décalage y rayon de flou rayon d'étalement couleur. Décalage X/Y : position de l'ombre. Flou : douceur (0 = contour net). Étirement : agrandissement (négatif = plus petit). Inset : dessine l'ombre à l'intérieur de l'élément.
Comment créer une ombre douce ?
Augmentez le rayon du flou (20-40 px), maintenez l'étalement proche de 0 et utilisez une couleur à faible opacité (rgba(0,0,0,0.1-0.2)). Décalez légèrement (y : 4-8 px). Cela crée l'effet d'ombre portée douce et moderne, courant dans les systèmes graphiques.
Puis-je superposer plusieurs ombres ?
Oui. CSS accepte plusieurs valeurs d'ombre séparées par des virgules : `box-shadow: shadow1, shadow2, shadow3`. Utilisez le bouton « Ajouter un calque d'ombre » pour créer des effets de superposition comme le néomorphisme ou des lueurs multicolores.
Quelle est la différence entre flou et diffusion ?
Le flou détermine la netteté des contours de l'ombre : plus le flou est important, plus l'ombre est diffuse. L'étalement détermine la taille de l'ombre : un étalement positif agrandit l'ombre par rapport à l'élément, un étalement négatif la réduit. L'étalement n'affecte pas le flou.
L'effet d'ombre portée affecte-t-il la mise en page ?
Non, l'ombre portée est rendue en dehors du modèle de boîte et n'affecte ni la taille, ni la position, ni le flux du document. Si vous avez besoin d'espace autour de l'élément pour l'ombre, utilisez plutôt une marge ou un remplissage.