Générateur d'Ombres CSS

Paramètres d'ombre

Décalage horizontal :0px

Décalage vertical :10px

Rayon de flou :20px

Rayon d'étalement :0px

Couleur de l'ombre

Opacité:100%

Ombre en retrait

Préréglages

Aperçu de l'ombre

Code CSS

.element {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 1);
}

Connexe: Générateur de Border Radius CSS, Préfixeur CSS, Générateur de Dégradés, Convertisseur de Couleurs, Formateur/Minifieur de Code, Générateur de Palette de Couleurs

? Questions Fréquemment Posées

Quelles propriétés d'ombre CSS puis-je générer ?

Cet outil génère des ombres portées (pour les éléments) et des ombres de texte (pour le texte). Vous pouvez contrôler le décalage horizontal et vertical, le rayon de flou, le rayon d'étalement (pour les éléments uniquement), la couleur et l'effet d'ombre interne. Il est possible de superposer plusieurs ombres.

Comment créer des effets d'ombre réalistes ?

Les ombres réalistes utilisent plusieurs couches d'ombres avec différents niveaux de flou et d'opacité pour imiter la lumière réelle. Commencez par une ombre nette et foncée près de l'objet, puis ajoutez des ombres plus douces et plus claires pour donner de la profondeur.

Quelle est la différence entre flou et diffusion ?

Le rayon de flou détermine la netteté des contours de l'ombre (plus il est grand, plus le flou est prononcé). Le rayon d'étalement permet d'agrandir ou de réduire la taille de l'ombre avant le flou. L'étalement est uniquement disponible pour les ombres portées, et non pour les ombres de texte.

Puis-je créer des ombres intérieures ?

Oui ! Le mot-clé « inset » crée des ombres internes qui apparaissent à l’intérieur de l’élément, lui donnant un aspect en retrait ou encastré. C’est idéal pour créer des boutons enfoncés ou des surfaces en creux.

Est-ce que l'aperçu en direct est affiché ?

Oui, le générateur offre un aperçu visuel en temps réel lorsque vous modifiez les paramètres d'ombre. Vous pouvez ainsi voir précisément l'apparence de l'ombre et copier le code CSS généré directement dans votre feuille de style.

Mes données sont-elles en sécurité ?

Oui, absolument ! Cet outil fonctionne entièrement dans votre navigateur. Le traitement des données s'effectue localement sur votre appareil ; aucune donnée n'est transférée vers nos serveurs. Vos fichiers et données restent sur votre ordinateur, garantissant ainsi une confidentialité et une sécurité totales.

Liens rapides