Générateur d'Ombres CSS

Ajustez le décalage, le flou, l'étalement, la couleur et l'opacité avec des curseurs en direct, prévisualisez le résultat sur une surface claire ou sombre, puis copiez un box-shadow CSS propre — le tout dans votre navigateur.

Aperçu

Ombre

Décalage X

Décalage Y

Flou

Étalement

Couleur

#0a0a0a

Opacité

CSS

box-shadow: 0px 10px 25px 0px rgba(10, 10, 10, 0.2);

Comment utiliser Générateur d'Ombres CSS

1
Réglez le décalage
Utilisez les curseurs de décalage X et Y pour déplacer l'ombre vers la gauche, la droite, le haut ou le bas. Une valeur Y positive fait descendre l'ombre sous l'élément, tandis qu'une valeur négative la fait remonter au-dessus.
2
Façonnez l'ombre
Augmentez le flou pour un bord doux et diffus, ou gardez-le faible pour une ombre nette. L'étalement agrandit ou réduit l'ombre avant l'application du flou.
3
Choisissez une couleur et l'opacité
Cliquez sur l'échantillon pour choisir la couleur de l'ombre, puis réglez l'opacité. Les ombres sombres, douces et peu opaques sont les plus naturelles sur des fonds clairs.

4
Copiez le CSS
Activez Intérieure (inset) si vous avez besoin d'une ombre interne, prévisualisez-la sur une surface claire ou sombre, puis copiez la ligne box-shadow dans votre feuille de style.

Questions fréquentes

Comment créer une ombre box-shadow en CSS ?

Réglez le décalage horizontal et vertical, le flou et l'étalement à l'aide des curseurs, choisissez une couleur et l'opacité, et le CSS box-shadow se génère juste en dessous en temps réel. Copiez-le et collez-le sur n'importe quel élément.

Que signifie chaque valeur de box-shadow ?

Les valeurs sont le décalage horizontal, le décalage vertical, le rayon de flou et le rayon d'étalement, suivis de la couleur. Les décalages déplacent l'ombre, le flou adoucit son bord et l'étalement détermine la taille de l'ombre avant qu'elle ne soit floutée.

Qu'est-ce qu'une ombre inset ?

Une ombre inset est dessinée à l'intérieur de l'élément plutôt que derrière lui, ce qui donne l'impression que la surface est enfoncée ou en creux. Basculez entre Extérieure et Intérieure (inset) pour passer d'une ombre externe à une ombre interne.

Comment obtenir une ombre douce et naturelle ?

Utilisez un faible décalage vertical, un flou généreux, un étalement légèrement négatif et une couleur sombre à faible opacité, autour de 10 à 25 pour cent. Les ombres dures et totalement opaques ont tendance à paraître artificielles.

Mes données sont-elles envoyées sur un serveur ?

Non. Le générateur fonctionne entièrement dans votre navigateur. Rien n'est envoyé, enregistré ni stocké, votre travail reste donc privé et l'outil continue de fonctionner même hors ligne.

Outils similaires

Continuez avec ces outils pratiques

Convertisseur HTML vers Texte

Formateur JSON

Testeur de Regex

Décodeur de JWT

Générateur de Dégradés CSS

Convertisseur de Texte en HTML