Générateur d'Ombre CSS Box
Créez des ombres CSS box visuellement avec aperçu en direct
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.25);Signaler un Problème
Vous avez trouvé un bug ou avez une suggestion ? Aidez-nous à améliorer cet outil.
Qu'est-ce que cet outil ?
Le Générateur d'Ombre CSS Box crée des déclarations box-shadow prêtes pour la production avec aperçu visuel en direct. Prend en charge les ombres simples et multiples en couches, avec des contrôles pour le décalage horizontal/vertical, le rayon de flou, le rayon d'expansion, la couleur et l'option inset. Génère des effets d'ombre complexes visuellement sans écrire de CSS manuellement.
Comment l'utiliser
- 1
Ajouter une couche d'ombre
Cliquez sur ajouter pour créer une nouvelle couche d'ombre.
- 2
Ajuster les paramètres
Réglez le décalage X/Y, le flou, l'expansion, la couleur et l'opacité de chaque couche.
- 3
Aperçu et copie
Consultez l'aperçu en direct et copiez le code CSS généré.
Foire aux questions
Comment fonctionne box-shadow ?
box-shadow ajoute un effet d'ombre autour du cadre d'un élément. Syntaxe : box-shadow: h-offset v-offset blur spread color inset. Les ombres multiples sont séparées par des virgules. Le navigateur rend chaque couche d'ombre indépendamment et les composite ensemble. Utilisez plusieurs couches pour créer des effets de profondeur complexes.
Qu'est-ce qui rend une ombre réaliste ?
Les ombres réalistes ont un flou plus important par rapport au décalage (généralement 3 à 5 fois), une opacité légèrement plus faible (10-30 %) et des couleurs aux teintes chaudes. Plusieurs couches d'ombre avec différentes tailles de flou créent une profondeur plus naturelle. Material Design fournit des valeurs d'ombre spécifiques pour différents niveaux d'élévation.
Que faire si le résultat semble erroné ?
Vérifiez deux fois vos valeurs saisies. L'outil utilise des formules standard, mais les cas limites peuvent nécessiter une vérification manuelle.