Générateur d'ombres CSS
Construisez une ombre CSS box-shadow visuellement et copiez la déclaration générée, entièrement dans votre navigateur.
Cet outil met en forme une déclaration box-shadow à partir de contrôles numériques et d'une couleur. Tout s'exécute dans votre navigateur.
Le rendu des ombres peut varier légèrement selon le navigateur, l'écran et le niveau de zoom.
Comment l'utiliser
- Réglez les décalages, le flou, l'étalement, la couleur et l'opacité de la première couche
- Activez inset si vous voulez que l'ombre soit dessinée à l'intérieur de l'élément
- Ajoutez d'autres couches et réordonnez-les avec monter et descendre au besoin
- Copiez la déclaration box-shadow générée, ou Réinitialiser pour repartir du réglage par défaut
Pour chaque couche d'ombre, réglez les décalages horizontal et vertical, le rayon de flou, le rayon d'étalement, une couleur et une opacité de 0 à 100 pour cent ; activez inset pour dessiner l'ombre à l'intérieur de l'élément plutôt qu'à l'extérieur. Empilez jusqu'à cinq couches, réordonnez-les avec monter et descendre, et supprimez n'importe quelle couche jusqu'à en garder une. Une carte d'aperçu neutre se met à jour en direct pendant que vous ajustez les contrôles, et la sortie en lecture seule affiche la déclaration box-shadow exacte, prête à coller. Toutes les valeurs proviennent de contrôles numériques bornés et d'une couleur hexadécimale validée — aucun CSS libre, donc url(), var() et calc() ne sont jamais acceptés. Tout s'exécute localement : rien n'est téléversé ni stocké. Cet outil ne prend pas en charge text-shadow, et il est distinct du Générateur de dégradés CSS, qui construit des dégradés d'arrière-plan et non des ombres d'élément.
FAQ
Elle dessine une ou plusieurs ombres autour d'une boîte : leur décalage horizontal et vertical, la douceur du flou, la taille de l'étalement, la couleur, et si l'ombre est à l'extérieur de l'élément ou en inset à l'intérieur.
Oui. Vous pouvez empiler jusqu'à cinq couches d'ombre dans une seule valeur box-shadow, chacune avec ses réglages, et les réordonner puisque les premières couches sont peintes au-dessus des suivantes.
Inset dessine l'ombre à l'intérieur de la boîte de bordure de l'élément plutôt qu'à l'extérieur, utile pour des effets de bouton enfoncé ou de lueur interne. C'est une option par couche.
Le flou adoucit le bord de l'ombre sur une distance ; l'étalement agrandit ou réduit l'ombre avant l'application du flou, si bien qu'un étalement positif donne une ombre plus grande et plus nette.
Non. La déclaration est construite dans votre navigateur à partir des contrôles numériques et de la couleur. Rien n'est envoyé à un serveur, rien n'est écrit en stockage, et seul un événement d'usage anonyme est enregistré.