Pinakamahusay na Libre CSS Box Shadow Generator
Visual na bumuo ng CSS box-shadow na may live na preview, inset at isang ikalawang layer - kopyahin ang code.
100% libre
Walang pag-signup
Walang watermark
✨
Pumunta Pro para sa pinakamahusay na AI modelo - imahe, video at chat - plus mas malaki uploads, prayoridad sa queue at walang paghihintay.
Mag-upgrade sa Pro
Pag-ibig Best.Free? Ibahagi ito
Paano ito gumagana
- Ilipat ang slider. Itakda ang offset, blur, kumalat, kulay at opacity; i-toggle ang inset kung nais mo ng isang panloob na lilim.
- Tingnan ang preview. Ang live na kahon ay nag-update habang ikaw ay mag-drag; magdagdag ng isang ikalawang layer sa Advanced na mga pagpipilian para sa lalim.
- Kopyahin ang CSS. Hit Copy CSS at i-paste ang kahon-shadow patakaran tuwid sa iyong stylesheet.
Tungkol sa tool na ito
Disenyo ng isang kahon-shadow na walang hulaan pixel halaga. I-drag ang offset-X, offset-Y, blur at kumalat sliders, pumili ng isang kulay ng lilim at dial sa opacity nito, at panoorin ang isang live preview kahon update sa real time - pagkatapos ay kopyahin ang eksaktong box-shadow CSS. Flip ang inset toggle para sa isang panloob na lilim. Ang Advanced na mga pagpipilian stack ng isang ikalawang lilim layer, kaya maaari mong bumuo ng soft, multi-layer shadows na ginagamit sa modernong mga card at mga button. Lahat ng bagay ay tumatakbo sa iyong browser.
Ano ang mga tao gamitin ito para sa
- Magdagdag ng isang soft drop lilim sa mga card at modals
- Lumikha ng isang panloob na (inset) lilim para sa mga input at wells
- Stack dalawang layer para sa isang makatotohanang, diffuse lilim
- Tune offset at blur upang tumugma sa isang disenyo mockup
Mga madalas itanong na katanungan
Offset-X / Y ilipat ang lilim pahalang at patayo, blur softens gilid nito, at kumalat lumalaki o shrinks ang buong lilim bago ang blur ay inilapat. Ang live preview ay nagpapakita ng bawat pagbabago agad.
Inset gumuhit ng lilim sa loob ng elemento sa halip ng sa likod nito, na nagbibigay ng isang pindutin-sa hitsura - kapaki-pakinabang para sa mga input at toggles. Flip ang inset toggle sa switch.
Ang mga ito ay: Ang mga selula ng tao ay may isang selula na tinatawag na selula ng utak (brain cell).
Oo. Buksan Advanced na mga pagpipilian upang payagan ang isang pangalawang lilim layer na may sariling offset, blur, kulay at inset.
Hindi. Ang generator ay tumatakbo ganap sa iyong browser; ang slider lamang compute ng isang CSS string sa lokal.
Ganap na libre, walang account at walang limitasyon - isang client-side tool na walang anumang upang sukatin.
Oo. Ito ay tumatakbo sa iyong browser, kaya CSS Box Shadow Generator gumagana sa mga telepono at tablet pati na rin ang desktop - walang app upang i-install.
Karaniwan lamang ng ilang segundo para sa isang tipikal na file - CSS Box Shadow Generator nagsisimula sa trabaho ang sandali mo bigyan ito ng iyong input.
Ang paggamit ng casual ay walang limitasyon, sa ilalim ng isang malawak na fair-use cap na pinapanatili itong mabilis para sa lahat.
Ang lahat ng mga modernong browser - Chrome, Safari, Firefox at Edge. CSS Box Shadow Generator kailangang walang naka-install sa labas ng browser na iyong ginagamit.