Générateur de box shadow CSS gratuit
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é. Sans inscription.
100% gratuit — aucun compte requis
Aperçu
CSS généré
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);Fonctionnalités de Générateur de box shadow CSS gratuit
Des ombres pixel-perfect sans deviner les valeurs CSS
Copier le CSS
Copie en un clic de la propriété CSS box-shadow générée.
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.
Contrôles intuitifs
Curseurs pour le décalage horizontal/vertical, le flou, l'étendue, la couleur et l'opacité.
FAQ
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.
Créez du contenu visuel époustouflant
Utilisez de belles ombres dans vos visuels pour les réseaux sociaux.