Hvernig bý ég til CSS box-shadow og afrita kóðann?

Stilltu sleðana fyrir x- og y-hliðrun, móðu (blur), dreifingu (spread), Litur og Ógegnsæi, og fylgstu með í beinni forskoðun. Smelltu svo á Afrita í CSS-úttakinu. Þú getur líka byrjað á Forstillingar eins og Mjúkt, Ljóma eða Material 8.

Get ég sett mörg skuggalög á sama stakið?

Já. Smelltu á + Bæta við skugga-lagi til að bæta við fleiri lögum, og svo geturðu endurraðað þeim, valið Fela eða Fjarlægja hvert um sig. Lögin eru sameinuð með kommu í einu box-shadow gildi.

Hvernig bý ég til innri skugga?

Veldu lag og kveiktu á Innri skuggi, eða veldu forstillinguna Inndregið. Úttakið inniheldur þá lykilorðið inset fyrir það lag.

Get ég fengið Tailwind-klasa í stað venjulegs CSS?

Já. Auk CSS-skilgreiningarinnar birtir tólið Tailwind-klasa með frjálsu gildi á forminu shadow-[...], þar sem bilum er skipt út fyrir undirstrik, tilbúið til að líma í kóðann þinn.

Er til auðveldari leið til að stilla staðsetningu skuggans en með sleðunum?

Já. Dragðu forskoðunarkassann til að færa skugga virka lagsins, og haltu Shift inni til að fínstilla. Þú getur líka breytt Forskoða bakgrunn og Litur kassans til að sjá hvernig skugginn kemur út í þinni hönnun.

Er þetta í alvöru ókeypis?

Já. Öll verkfæri eru ókeypis í notkun, án aðgangs og án kreditkorts. Vinnan fer fram í tækinu þínu frekar en á netþjónum okkar, sem gerir það að verkum að hægt er að halda þjónustunni ókeypis.

Virkar það í farsíma?

Já. Það keyrir í nýlegum farsímavöfrum á iOS og Android án þess að setja neitt upp.

🎨

CSS kassaskuggasmiður — ókeypis

Sjónlægur smiður fyrir CSS box-shadow með beinni forskoðun, marglagsstafla, litatvelja, innsetninga-skiptur og eins-smella-afritun. Inniheldur Material, neumorphism og glóðuforstillingar.

Keyrir í vafranum þínumEngin skráning, engir sprettigluggarEngin innskráning krafistFrjáls að eilífu

Virkar án nettengingar eftir hleðslu

Forskoða bakgrunn

Dragðu kassann til að staðsetja skugga virks lags - haltu Shift fyrir fínstilla stýringu

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

Forstillingar

Litur kassans

Jaðarradíus (16px)

x (0px)

y (4px)

þoka (12px)

dreifing (0px)

Litur

Gegnsæi (15%)

Innri skuggi

Algeng notkun

Kort UI skuggarByggðu glæsilega kort skuggar fyrir borðar, vöru grid og skjái.
Hnappur pressa áhrifByggðu hnappur skuggar sem líkja raunverulegum dýpt og pressa ástand.
Neumorphism mjúk UIBúaðu til mjúk-UI neumorphism útlit með pöruð ljós + dimmur skuggar.
Modal & Popover skuggarBúaðu til hækkað, fljótandi tilfinning fyrir svargluggi og fallandi valmyndir.
Glow & Focus Ring EffectsBúðu til gljóandi áhersluáhrif, focus-hringir og neon-stíll hermilegir.

Hvernig það virkar

Box-shadow myndarinn er alfarið biðlarahliðar React-tól — enginn netþjónn, ekkert bókasafn. Hann viðheldur lista skuggalagshluta í ástandi, rangar saman gilda CSS box-shadow strengi við hverja breytingu með handskrifuðum rgba() formara, og beitir þeim beint á forskoðunarelement með style-prop React svo eigin myndgerðarvél vafrans teikni niðurstöðuna samstundis.

1
Lagfæribreytur mata formarann
Hvert skuggalag geymir x/y hliðranir, blur, spread, hexlit, og ógegnsæisgildi. Við hverja breytingu breytir lítil shadowToCss fall hexlitnum í RGB-hluta með regex, rangar svo saman rgba() strenginn — til dæmis, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Mörg lög eru tengd með kommum.
2
Vafrinn myndgerir lifandi forskoðunina
Sett saman strengurinn er úthlutaður á boxShadow-stílseiginleika div-elements beint í JSX. React uppfærir DOM-eiginleikann, og CSS-vél vafrans málar skuggann samstundis — enginn kanvas eða WebGL kemur við sögu, aðeins native CSS-myndgerð.
3
Draga-til-staðsetningar notar Pointer Events API
Að smella og draga forskoðunarboxið kallar á setPointerCapture á elementinu, fylgist svo með onPointerMove-breytingum til að uppfæra x- og y-hliðranir virka lagsins í rauntíma. Að halda Shift beitir 0,25x skalastuðli fyrir fínstillta staðsetningu.
4
Úttak er afritað á klippiborðið
Tólið framleiðir tvö úttakssnið úr sömu laggagnasetningu: staðlaða CSS box-shadow yfirlýsingu, og Tailwind handahófs-gildisflokk (shadow-[...]) þar sem bil eru skipt út fyrir undirstrik samkvæmt setningafræði Tailwind. Einn-smellis afritun notar navigator.clipboard.writeText.