onul.works

Générateur d’ombre CSS

Ajustez une ombre portée CSS avec aperçu en direct et copiez la valeur box-shadow prête à utiliser.

⌘ S’exécute dans le navigateur ◴ Aucune donnée stockée ⌁ Gratuit

Concept

CSS box-shadow prêt à l’usage pour cartes, boutons et modales

Ajustez vite la profondeur et les limites des composants en combinant offset-x, offset-y, blur, spread, color et inset.

Le box-shadow permet de régler rapidement la profondeur et la séparation visuelle avec les paramètres offset, blur, spread, color et inset.

Cet outil aide à générer des valeurs de shadow CSS puis à vérifier contraste et lisibilité en fond clair/sombre avant application sur cards, boutons et modales réelles.

Cas d’usage

Quand vous créez une hiérarchie visuelle pour card hover, la mise en valeur des boutons, overlays de modale ou toasts.

Guide des paramètres

offset x/y définit la direction, blur la douceur, spread la largeur, color la tonalité, et inset donne une sensation d’intérieur.

Vérification avant application

Vérifiez le fond réel de page, le dark mode, le contraste du texte des boutons et la cohérence avec les tokens système (radius, espaces, ton ombre).

La sortie est dédiée à la prévisualisation rapide et au copier-coller. Vérifiez de nouveau dans l’UI réelle car le rendu varie selon mode, fond et tokens.

CSS box-shadow

Mode d’emploi

  1. 1 Ajoutez une couche d’ombre et ajustez les valeurs de décalage X/Y, de flou et d’étalement.
  2. 2 Modifiez la couleur et l’option inset tout en vérifiant l’aperçu.
  3. 3 Copiez le CSS box-shadow généré dans votre feuille de style.

Cas d’usage courants

  • Création de CSS box-shadow pour cartes
  • Réglage de plusieurs couches d’ombre
  • Copie d’une valeur d’ombre interne

Questions fréquentes

Quelles valeurs d’ombre puis-je ajuster ?

Vous pouvez ajuster le décalage X/Y, le flou, l’étalement, la couleur, l’opacité et l’option inset, ainsi qu’ajouter ou supprimer plusieurs couches d’ombre.

Puis-je utiliser directement le CSS box-shadow généré ?

Oui. Le CSS box-shadow final apparaît sous l’aperçu, et le bouton de copie l’envoie dans votre presse-papiers.

L’aperçu se met-il à jour quand je change les valeurs ?

Lorsque vous ajustez les curseurs ou les valeurs de couleur, la boîte d’aperçu et la sortie CSS se mettent à jour immédiatement.

Flux de travail associé

Générateur d’ombre CSSDéfinissez la profondeur d’ombre des cartes, boutons ou panneaux afin que la hiérarchie de l’interface reste lisible. → Générateur de codes-barresSi une étiquette ou un panneau contient un identifiant, vérifiez son poids visuel par rapport à la profondeur d’ombre choisie. → Sélecteur de couleursHarmonisez les couleurs de fond et d’accent pour que les ombres paraissent naturelles sur les cartes et boutons.