Outils · CSS · Créer une ombre CSS
Créer une ombre CSS
Créez une ombre CSS multicouche (box-shadow) avec un aperçu en direct, puis copiez le code.
Ajoutez un fichier et lancez l’outil.
Votre fichier est prêt.
Essayez un autre fichier, ou réessayez.
Réglages
Ajustez les réglages ci-dessous. Le résultat se met à jour au fur et à mesure.
Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.
Fonctionne entièrement dans votre navigateur. Rien n'est jamais envoyé à un serveur.
Comment ça marche
Partez d'un préréglage, ou réglez vous-même le décalage, le flou, l'extension et la couleur d'une couche.
Ajoutez d'autres couches pour donner de la profondeur (4 au total maximum), ou supprimez-en.
Copiez le CSS box-shadow terminé.
Questions fréquentes
Oui, jusqu'à quatre couches. Elles s'affichent dans l'ordre où vous les ajoutez, qui est aussi l'ordre dans lequel le CSS les applique - la première couche est donc la plus proche de l'élément.
Le décalage horizontal et vertical déplace l'ombre. Le flou adoucit son bord. L'extension agrandit ou réduit l'ombre avant que le flou ne soit appliqué.
Elle dessine l'ombre à l'intérieur de la bordure de l'élément plutôt qu'à l'extérieur, pour un effet enfoncé.
Non. Tout se passe dans votre navigateur, rien n'est envoyé nulle part.
Guides
Un aperçu plus précis de problèmes concrets que résout cet outil.
Why One Flat Shadow Looks Fake, and Layered Ones Don't
A single box-shadow value usually reads as a sticker glued behind the element, not an object lifted off the page. Real light casts two different kinds of shadow at once, and CSS can only fake that with more than one layer.
Lire le guideHow to Build a Layered CSS Box-Shadow
The exact steps for building a real, comma-separated box-shadow value with more than one layer, plus the two settings people get backwards: spread versus blur, and inset versus outer.
Lire le guideInset vs. Drop Shadow: Which One Your Design Actually Needs
The same four numbers - offset, blur, spread, opacity - mean opposite things depending on one checkbox. Here's how to tell which direction a given piece of UI actually calls for.
Lire le guide
Commentaires