Vés al contingut principal
LibraTool logoLibraTool

Generador de box-shadow CSS de franc

Constructor visual per a box-shadow CSS amb previsualització en viu, apilament de múltiples capes, selector de color, commutador d'inserció i còpia amb un clic. Inclou presets de Material, neumorfisme i resplendor.

Funciona sense connexió un cop carregat
Fons de la vista prèvia

Arrossega la caixa per posicionar l'ombra de la capa activa — mantén premut Shift per control fi

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

Predefinits

Usos habituals

  • Ombres UI de targetesConstruïu ombres de targeta elegant per a taulers, graelles de productes i taulers.
  • Efectes de premut de botóConstruïu ombres de botó que imiten la profunditat i els estats de pressió del món real.
  • Neumorphism Soft UICreeu l'aspecte soft UI neumorphism amb ombres clars + fosques aparellades.
  • Ombres Modal & PopoverCreeu una sensació elevada i flotant per a diàlegs i menús desplegables.
  • Efectes de llum i anell de focusCreeu efectes d'accent brillants, anells de focus i realçats d'estil neó.

Com funciona

El generador de box-shadow és una eina de React completament del costat del client — sense servidor, sense biblioteca. Manté una llista d'objectes de capes d'ombra en l'estat, assembla cadenes CSS box-shadow vàlides a cada canvi utilitzant un formatador rgba() escrit a mà, i les aplica directament a un element de previsualització a través de la prop style de React perquè el propi motor de renderització del navegador dibuixi el resultat a l'instant.

  1. 1
    Els paràmetres de capa alimenten el formatador
    Cada capa d'ombra desa desplaçaments x/y, difuminat, propagació, un color hexadecimal i un valor d'opacitat. A cada canvi, una petita funció shadowToCss converteix el color hexadecimal a components RGB amb una expressió regular, i després assembla la cadena rgba() — per exemple, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Diverses capes s'uneixen amb comes.
  2. 2
    El navegador renderitza la previsualització en directe
    La cadena assemblada s'assigna a la propietat d'estil boxShadow d'un element div directament en JSX. React actualitza l'atribut del DOM, i el motor CSS del navegador pinta l'ombra immediatament — no hi ha canvas ni WebGL implicats, només renderització CSS nativa.
  3. 3
    L'arrossegament per posicionar utilitza l'API Pointer Events
    Fer clic i arrossegar la caixa de previsualització crida setPointerCapture sobre l'element, i després segueix els deltes d'onPointerMove per actualitzar en temps real els desplaçaments x i y de la capa activa. Mantenir premut Shift aplica un factor d'escala de 0,25x per a un posicionament de gra fi.
  4. 4
    La sortida es copia al porta-retalls
    L'eina produeix dos formats de sortida a partir de les mateixes dades de capa: una declaració CSS box-shadow estàndard, i una classe de valor arbitrari de Tailwind (shadow-[...]) on els espais es reemplacen per guions baixos segons les regles de sintaxi de Tailwind. La còpia amb un clic utilitza navigator.clipboard.writeText.

Eines relacionades

◖

Generador de border-radius CSS

Dissenya cantonades arrodonides visualment amb control independent de cada cantonada. Admet la sintaxi el·líptica X/Y per a formes orgàniques de blob.

Prova-ho
🟦

Generador de CSS Grid

Dissenya visualment una CSS grid — pistes, unitats i buits — i copia el CSS i HTML generat.

Prova-ho
↔️

Generador de CSS Flexbox

Experimenta amb direcció flex, wrap, justify i align en elements en viu — i copia el CSS.

Prova-ho

Preguntes freqüents