Hoe skep ek 'n CSS-blokkieskadu en kopieer die kode?

Verstel die skuifbalkies vir x- en y-verskuiwing, vervaging, verspreiding, Kleur en deursigtigheid terwyl jy die regstreekse voorskou dophou. Druk dan Kopieer in die CSS-afvoer. Jy kan ook begin by Voorkeure soos Sag, Gloed of Material 8.

Kan ek verskeie skaduwees op een element stapel?

Ja. Druk + Voeg nog 'n skaduweelaag by om meer lae by te voeg, herrangskik hulle dan, Verberg of Verwyder elkeen. Die lae word met kommas in 'n enkele box-shadow-waarde saamgevoeg.

Hoe maak ek 'n inset-skaduwee?

Kies 'n laag en skakel Inset-skaduwee aan, of laai die Ingekeep-voorkeur. Die afvoer bevat dan die inset-sleutelwoord vir daardie laag.

Kan ek 'n Tailwind-klas in plaas van gewone CSS kry?

Ja. Benewens die CSS-verklaring, lewer die instrument 'n Tailwind arbitrêre-waarde-klas in die vorm shadow-[...], met spasies vervang deur onderstrepe, gereed om in jou opmaak te plak.

Is daar 'n makliker manier om die skaduweeposisie te stel as die skuifbalkies?

Ja. Sleep die voorskoublokkie om die aktiewe laag se skaduwee te skuif, en hou Shift in vir fyn beheer. Jy kan ook die Voorskou agtergrond en Blokkkleur verander om te sien hoe die skaduwee op jou ontwerp lyk.

Is dit regtig gratis?

Ja. Elke instrument is gratis om te gebruik, sonder 'n rekening en sonder 'n kredietkaart. Die werk loop op jou toestel eerder as op ons bedieners, en dit is wat dit gratis hou om te loop.

Ja. Dit werk in huidige mobiele blaaiers op iOS en Android, sonder om iets te installeer.

🎨

Gratis CSS-blokkieskadu-opwekker

Visuele bouer vir CSS boksskadu met lewendige voorskou, multi-laag stapeling, kleurkieser, insetwisseling en een-klik kopie. Sluit materiaal, neumorfisme en gloeivoorinstellings in.

Loop in jou blaaierGeen aanmelding, geen opspringers nieGeen aanmelding benodigGratis vir altyd

Werk vanlyn sodra gelaai

Voorskou agtergrond

Sleep die boks om die aktiewe laag se skaduwee op te stel - hou Shift in vir fynbeheer

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

Voorkeure

Blokkkleur

Randradius (16px)

x (0px)

y (4px)

vervaging (12px)

verspreiding (0px)

Kleur

Deursigtigheid (15%)

Inset-skaduwee

Algemene gebruike

Kaart UI-skadu'sBou elegante kaartskadu's vir dashboards, produkteroosters en dashboards.
Knop Druk EffekteBou knopskadu's wat werklike diepte en druktoestande naboots.
Neumorfisme SagteuiSkep die sagteui-neumorfisme voorkoms met gepaard ligte + donker skadu's.
Modal & Popover Skadu'sSkep die verhoogde, dryweende gevoel vir dialoge en vervolgkeuse.
Skyn en Fokus Anulus-effekteSkep gloeide skyner, fokus ringe en neon-styl verligtings.

Hoe dit werk

Die box-shadow-generator is 'n heeltemal kliëntkant-React-nutsprogram — geen bediener, geen biblioteek nie. Dit hou 'n lys van skaduwee-laagobjekte in toestand, stel geldige CSS box-shadow-strings by elke verandering saam met 'n handgeskrewe rgba()-formateerder, en pas hulle direk op 'n voorskou-element toe via React se style-eienskap sodat die blaaier se eie renderingenjin die resultaat oombliklik teken.

1
Laagparameters voer die formateerder
Elke skaduweelaag stoor x/y-verskuiwings, wasigheid, verspreiding, 'n heks-kleur, en 'n dekkingswaarde. By elke verandering skakel 'n klein shadowToCss-funksie die heks-kleur om na RGB-komponente met 'n reëlmatige uitdrukking, stel dan die rgba()-string saam — byvoorbeeld, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Verskeie lae word met kommas saamgevoeg.
2
Die blaaier render die lewendige voorskou
Die saamgestelde string word toegeken aan die boxShadow-styleienskap van 'n div-element direk in JSX. React werk die DOM-eienskap by, en die blaaier se CSS-enjin verf die skaduwee onmiddellik — daar is geen canvas of WebGL betrokke nie, net inheemse CSS-rendering.
3
Sleep-om-te-posisioneer gebruik die Pointer Events-API
Om die voorskoublokkie te klik en te sleep roep setPointerCapture op die element aan, en volg dan onPointerMove-deltas om die aktiewe laag se x- en y-verskuiwings intyds by te werk. Om Shift te hou pas 'n 0.25x-skaalfaktor toe vir fyn posisionering.
4
Uitset word na die knipbord gekopieer
Die nutsprogram produseer twee uitsetformate vanaf dieselfde laagdata: 'n standaard CSS box-shadow-verklaring, en 'n Tailwind-arbitrêre-waarde-klas (shadow-[...]) waar spasies met onderstrepe vervang word volgens Tailwind se sintaksisreëls. Eenkliek-kopieer gebruik navigator.clipboard.writeText.