Aller au contenu principal
LibraTool logoLibraTool

Générateur d'ombres portées CSS — outil gratuit

Constructeur visuel pour CSS box-shadow avec aperçu en direct, empilement de plusieurs couches, sélecteur de couleur, bascule inset et copie en un clic. Comprend les préréglages Material, neumorphisme et lueur.

Fonctionne hors ligne une fois chargé
Aperçu du fond

Faites glisser la boîte pour positionner l'ombre de la couche active - maintenez Maj pour un contrôle fin

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Préréglages

Utilisations courantes

  • Ombres de l'interface utilisateur de la carteCréez des ombres de carte élégantes pour les tableaux de bord, les grilles de produits et les tableaux de bord.
  • Effets de pression du boutonCréez des ombres de bouton qui imitent la profondeur du monde réel et les états de pression.
  • Interface utilisateur douce NeumorphismeCréez l'apparence du neumorphisme soft-UI avec des ombres claires et sombres appariées.
  • Ombres modales et popoverCréez l'apparence élevée et flottante pour les boîtes de dialogue et les menus déroulants.
  • Effets de Lueur et d'Anneau de FocusCréez des effets lumineux, des anneaux de focus et des surlignages de style néon.

Comment ça marche

Le générateur de box-shadow est un outil React entièrement côté client — sans serveur, sans bibliothèque. Il maintient une liste d'objets de couche d'ombre dans l'état, assemble des chaînes CSS box-shadow valides à chaque changement avec un formateur rgba() écrit à la main, et les applique directement à un élément d'aperçu via la propriété style de React afin que le moteur de rendu du navigateur lui-même dessine le résultat instantanément.

  1. 1
    Les paramètres de couche alimentent le formateur
    Chaque couche d'ombre stocke des décalages x/y, un flou, une extension, une couleur hexadécimale et une valeur d'opacité. À chaque changement, une petite fonction shadowToCss convertit la couleur hexadécimale en composantes RVB avec une expression régulière, puis assemble la chaîne rgba() — par exemple, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Plusieurs couches sont jointes par des virgules.
  2. 2
    Le navigateur rend l'aperçu en direct
    La chaîne assemblée est affectée à la propriété de style boxShadow d'un élément div directement en JSX. React met à jour l'attribut du DOM, et le moteur CSS du navigateur peint l'ombre immédiatement — il n'y a ni canevas ni WebGL impliqué, juste du rendu CSS natif.
  3. 3
    Le glisser-déposer utilise l'API Pointer Events
    Cliquer et faire glisser la boîte d'aperçu appelle setPointerCapture sur l'élément, puis suit les deltas onPointerMove pour mettre à jour en temps réel les décalages x et y de la couche active. Maintenir Maj applique un facteur d'échelle de 0,25x pour un positionnement fin.
  4. 4
    Le résultat est copié dans le presse-papiers
    L'outil produit deux formats de sortie à partir des mêmes données de couche : une déclaration CSS box-shadow standard, et une classe Tailwind à valeur arbitraire (shadow-[...]) où les espaces sont remplacés par des soulignés selon les règles de syntaxe de Tailwind. La copie en un clic utilise navigator.clipboard.writeText.

Outils associés

◖

Générateur de bordures arrondies CSS

Concevez visuellement des coins arrondis avec un contrôle indépendant sur chaque coin. Prend en charge la syntaxe X/Y elliptique pour les formes organiques.

Essayer
🟦

Générateur CSS Grid

Concevez visuellement une grille CSS — pistes, unités et espacements — et copiez le CSS et le HTML générés.

Essayer
↔️

Générateur CSS Flexbox

Expérimentez avec la direction flex, le retour à la ligne, la justification et l'alignement sur des éléments en direct — et copiez le CSS.

Essayer

Questions fréquemment posées