Miten luon CSS-varjon ja kopioin koodin?

Säädä x- ja y-siirtymän, sumennuksen, leviämän, Värin ja peittävyyden liukusäätimiä ja seuraa esikatselua. Paina sitten Kopioi CSS-tulosteessa. Voit aloittaa myös Esiasetetut-valikosta, kuten Pehmeä, Hehku tai Material 8.

Voinko pinota useita varjoja yhteen elementtiin?

Kyllä. Paina + Lisää varjokerros lisätäksesi kerroksia, minkä jälkeen voit järjestää ne uudelleen, Piilota tai Poista jokaisen. Kerrokset yhdistetään pilkuilla yhdeksi box-shadow-arvoksi.

Miten teen sisäpuolisen varjon?

Valitse kerros ja kytke Sisäinen varjo päälle tai lataa Sisäänpäin-esiasetus. Tuloste sisältää tällöin inset-avainsanan kyseiselle kerrokselle.

Saanko Tailwind-luokan pelkän CSS:n sijaan?

Kyllä. CSS-määrittelyn lisäksi työkalu tuottaa Tailwindin mielivaltaisen arvon luokan muodossa shadow-[...], jossa välilyönnit on korvattu alaviivoilla, valmiina liitettäväksi merkintöihisi.

Onko varjon sijainnin asettamiseen helpompaa tapaa kuin liukusäätimet?

Kyllä. Vedä esikatselulaatikkoa siirtääksesi aktiivisen kerroksen varjoa, ja pidä Shift-näppäintä pohjassa tarkempaa säätöä varten. Voit myös vaihtaa Esikatsele taustaa ja Boksin väriä nähdäksesi, miltä varjo näyttää suunnitelmassasi.

Onko se todella ilmainen?

Kyllä. Jokainen työkalu on ilmainen, eikä vaadi tiliä tai luottokorttia. Työ tehdään laitteellasi palvelimiemme sijaan, minkä ansiosta se pysyy maksuttomana.

Toimiiko se mobiililla?

Kyllä. Se toimii nykyaikaisissa mobiiliselaimissa iOS:llä ja Androidilla, eikä mitään tarvitse asentaa.

🎨

CSS-varjogeneraattori ilmaiseksi

Visuaalinen rakentaja CSS:n box-shadow-ominaisuudelle reaaliaikaisella esikatselulla, monikerrospinoamisella, värinvalitsimella, sisävarjovaihtoehdolla ja yhdellä napsautuksella kopioitavalla. Sisältää Material-, neumorfismi- ja hehkuesimääritetyt arvot.

Toimii selaimessasiEi rekisteröitymistä, ei ponnahdusikkunoitaEi kirjautumista tarvitaIlmainen ikuisesti

Toimii offline-tilassa kerran ladattuna

Esikatsele taustaa

Vedä laatikkoa varjon sijainnin muuttamiseen aktiiviselle tasolle — pidä Shift-näppäin painettuna hienoiselle säädölle

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

Esiasetetut

Boksin väri

Reunan pyöristys (16px)

x (0px)

y (4px)

epäterävyys (12px)

levitys (0px)

Väri

Peittävyys (15%)

Sisäinen varjo

Yleiset käyttötavat

Kortin UI-varjotRakenna tyylikkäät kortin varjot kojelautoille, tuotehiloille ja kojelautoille.
Painike Painota TehosteitaRakenna painikkeen varjoja, jotka jäljittelevät todellisen maailman syvyyttä ja painamisen tiloja.
Neumorphism Soft UILuo pehmeä-UI neumorphism ulkonäkö paritettujen vaaleilla + tummat varjot.
Modal & Popover VarjotLuo korotettu, leijuva tuntuma valintaikkunoille ja pudotusvalikkoille.
Hehkuu- ja Focus Ring -efektitLuo hehkuvia korostusefektejä, focus ringejä ja neon-tyylisiä korostuksia.

Miten se toimii

Box-shadow-generaattori on täysin asiakaspuolinen React-työkalu — ei palvelinta, ei kirjastoa. Se ylläpitää varjokerrosten listaa oliotilassa, kokoaa kelvollisia CSS box-shadow-merkkijonoja jokaisella muutoksella käsin kirjoitetulla rgba()-muotoilijalla, ja soveltaa niitä suoraan esikatseluelementtiin Reactin style-propin kautta, jotta selaimen oma piirtomoottori piirtää tuloksen välittömästi.

1
Kerrosparametrit syöttävät muotoilijaa
Jokainen varjokerros tallentaa x/y-siirtymät, sumennuksen, leviämisen, heksaväri- ja peittoarvon. Jokaisella muutoksella pieni shadowToCss-funktio muuntaa heksavärin RGB-komponenteiksi säännöllisellä lausekkeella, ja kokoaa sitten rgba()-merkkijonon — esimerkiksi 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Useat kerrokset yhdistetään pilkuilla.
2
Selain piirtää suoran esikatselun
Koottu merkkijono asetetaan div-elementin boxShadow-tyyliominaisuudeksi suoraan JSX:ssä. React päivittää DOM-attribuutin, ja selaimen CSS-moottori maalaa varjon välittömästi — ei kanvasta eikä WebGL:ää, vain natiivi CSS-piirto.
3
Vedä sijoittaaksesi käyttää Pointer Events -rajapintaa
Esikatselulaatikon napsauttaminen ja vetäminen kutsuu setPointerCapture-funktiota elementille, ja seuraa sitten onPointerMove-deltoja päivittääkseen aktiivisen kerroksen x- ja y-siirtymät reaaliajassa. Vaihto-näppäimen (Shift) painaminen soveltaa 0,25x-skaalauskerrointa tarkkaa sijoittelua varten.
4
Tuloste kopioidaan leikepöydälle
Työkalu tuottaa kaksi tulostemuotoa samasta kerrosdatasta: standardin CSS box-shadow-määrityksen, ja Tailwind-mielivaltaisarvoluokan (shadow-[...]), jossa välilyönnit korvataan alaviivoilla Tailwindin syntaksisääntöjen mukaisesti. Yhden napsautuksen kopiointi käyttää navigator.clipboard.writeText-funktiota.