Aller au contenu principal

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.

Couche d'ombre 1
CSS généré

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.

Généré localement dans votre navigateur

Comment l'utiliser

  1. Réglez les décalages, le flou, l'étalement, la couleur et l'opacité de la première couche
  2. Activez inset si vous voulez que l'ombre soit dessinée à l'intérieur de l'élément
  3. Ajoutez d'autres couches et réordonnez-les avec monter et descendre au besoin
  4. 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

Nous utilisons des cookies pour faire fonctionner ce site et, avec votre accord, pour comprendre son usage et personnaliser les publicités. Vous pouvez modifier votre choix à tout moment.