Que signifient les valeurs de l'ombre ?

Le décalage horizontal déplace l'ombre à gauche/droite, le vertical la déplace en haut/bas, le flou contrôle la douceur, l'étendue contrôle la taille, et la couleur définit la couleur de l'ombre.

Qu'est-ce qu'une ombre inset ?

Une ombre inset apparaît à l'intérieur de l'élément plutôt qu'à l'extérieur, créant un effet d'enfoncement ou de creux.

Combien de couches d'ombre puis-je utiliser ?

Le CSS supporte un nombre illimité de couches d'ombre. Cet outil permet d'en ajouter plusieurs. Les designs courants utilisent 1-3 couches pour une profondeur subtile et réaliste.

Outil Design

Générateur d'ombres CSS (Box Shadow)

Concevez des ombres CSS visuellement avec des curseurs pour le décalage, le flou, l'étendue, la couleur et l'opacité. Superposez plusieurs ombres et choisissez parmi des préréglages. Copiez le CSS généré.

100% gratuit — aucun compte requis

Préréglages

Couches d'ombres

Décalage H: 0

-5050

Décalage V: 4

-5050

Flou: 12

0100

Étendue: 0

050

Couleur

Opacité: 15%

Inset

Aperçu

CSS généré

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Concepteur d'ombres visuel

Des ombres pixel-perfect sans deviner les valeurs CSS

Contrôles intuitifs

Curseurs pour le décalage horizontal/vertical, le flou, l'étendue, la couleur et l'opacité.

Ombres multiples

Empilez plusieurs couches d'ombres pour des effets complexes et réalistes.

5 préréglages

Points de départ subtil, moyen, fort, flottant et lueur interne.

Copier le CSS

Copie en un clic de la propriété CSS box-shadow générée.

FAQ

Outils Design

Créez du contenu visuel époustouflant

Utilisez de belles ombres dans vos visuels pour les réseaux sociaux.