Box Shadow Generator

I-drag ang mga slider para humubog ng box-shadow, magpatong ng mga layer para sa lalim, at kopyahin ang natapos na CSS agad-agad.

Mga layer ng anino
Layer 1
CSS
I-adjust ang mga slider para hubugin ang iyong anino.

Ang bawat anino ay nire-render sa iyong browser. Walang anuman sa mga inilalagay mo rito ang ina-upload sa BroBroGo.

FAQ

Ano ba talaga ang kinokontrol ng offset, blur, at spread?

Inuusog ng offset ang anino pakaliwa/pakanan at pataas/pababa, pinapalambot ng blur ang mga gilid nito, at pinalalaki o pinapaliit naman ito ng spread bago i-blur. Ang negatibong spread ay humihila sa anino papasok, na kapaki-pakinabang para sa masinsin at malapit na anino.

Ano ang ginagawa ng inset option?

Ang normal na anino ay lumalabas sa labas ng elemento, tulad ng liwanag sa likod ng nakaangat na card. Ang inset naman ay nagbabaligtad nito papasok, kaya magmumukhang nakalubog ang elemento — kapaki-pakinabang para sa mga sunken input o pinindot na button.

Bakit kailangang magpatong ng higit sa isang layer ng anino?

Ang nag-iisang anino ay mukhang flat kapag lumampas sa partikular na laki. Ang totoong elevation ay karaniwang pinagsasama ang masinsin at madilim na anino sa malambot at mas malawak na anino — magdagdag ng pangalawang layer at i-tune ang bawat isa nang magkahiwalay para makuha ang epektong iyon.

Isinulat at sinuri ng editorial team ng BroBroGo.Huling na-update:

Pag-unawa sa CSS box-shadow Property

Ang box-shadow ay isang mahalagang CSS property na ginagamit upang magdagdag ng lalim, dimensyon, at visual elevation sa mga elemento ng isang web page. Sa pamamagitan ng paglalapat ng anino, nagkakaroon ang mga designer at front-end developer ng kakayahang kontrolin kung paano namumukod-tangi ang isang elemento sa loob ng layout. Ang generator na ito ay nagbibigay-daan sa mabilis na pagbuo ng code sa pamamagitan ng pag-adjust sa mga pangunahing katangian ng anino gamit ang mga slider, na nagpapakita ng resulta nang real-time.

Ang bawat anino ay binubuo ng mga tiyak na parameter: ang pahalang at patayong posisyon, ang antas ng kalabuan (blur), ang laki ng pagkalat (spread), ang kulay, at ang antas ng transparency (opacity). Ang pag-unawa sa interaksyon ng mga value na ito ang susi sa paglikha ng makatotohanang disenyo.

Ang Papel ng Offset, Blur, at Spread sa Disenyo ng Anino

Ang visual na anyo ng isang anino ay nakasalalay sa apat na magkakaibang sukat na sinusukat sa pixels (px):

  • Pahalang na offset: Kinokontrol nito ang paggalaw ng anino pakaliwa o pakanan. Ang slider ay may sakop mula -50px hanggang 50px. Ang negatibong value ay nag-uusog sa anino pakaliwa, habang ang positibong value naman ay nag-uusog nito pakanan.
  • Patayong offset: Kinokontrol nito ang paggalaw ng anino pataas o pababa. May sakop ito mula -50px hanggang 50px. Ang negatibong value ay naglalagay ng anino sa itaas ng elemento, habang ang positibong value ay naglalagay nito sa ibaba.
  • Blur: Tinutukoy nito kung gaano kalambot o kalabo ang mga gilid ng anino. Ang sakop nito ay mula 0px (na nagbibigay ng matigas at solidong gilid) hanggang 100px (para sa napakalamlam at malawak na pagkalat ng liwanag).
  • Spread: Kinokontrol nito ang paglaki o pagliit ng anino bago ilapat ang blur. Ang sakop nito ay mula -50px hanggang 50px. Ang positibong value ay nagpapalawak sa anino sa lahat ng direksyon, habang ang negatibong value naman ay humihila sa anino papasok, na mainam para sa paglikha ng masinsin at malapit na anino.

Pagkakaiba ng Normal na Anino at Inset na Anino

Sa default na setting, ang anino ay lumilitaw sa labas ng elemento. Ito ang tinatawag na normal na anino na nagbibigay ng impresyon na ang elemento ay nakaangat o lumulutang sa ibabaw ng background. Angkop ang estilong ito para sa mga card, modal, at mga button na maaaring i-click.

Kapag in-activate ang Inset na anino, ang direksyon ng anino ay nagbabaligtad at lumilitaw sa loob ng mga gilid ng elemento. Ang visual na epektong ito ay nagpapamukhang nakalubog o nakabaon ang elemento sa screen. Karaniwan itong ginagamit sa mga form input, sunken button, o mga active state ng mga interactive na elemento upang ipahiwatig na ang mga ito ay pinindot.

Paglikha ng Lalim Gamit ang Maramihang Layer ng Anino

Ang paggamit ng iisang layer ng anino ay madalas na nagreresulta sa isang flat o hindi natural na hitsura kapag pinalaki ang blur at spread. Sa totoong mundo, ang anino ay binubuo ng iba't ibang antas ng dilim at lambot dahil sa kalat na liwanag. Upang magaya ito sa web design, maaari tayong magpatong ng higit sa isang layer ng anino.

Ang tool na ito ay nagbibigay-daan sa pagdaragdag ng karagdagang layer sa pamamagitan ng pag-click sa Magdagdag ng layer. Maaari ding alisin ang hindi kinakailangang layer gamit ang Alisin ang layer. Ang tool ay may pre-rendered na limang layer, kung saan ang unang layer ay may default na value na 0 8 24 -4 at may 18% transparent black na kulay, habang ang iba pang apat na layer ay paunang nakatago. Kapag may maramihang layer, ang nabubuong CSS code ay awtomatikong pinagsasama-sama gamit ang mga kuwit (comma-separated values) upang maging isang solong deklarasyon.

Mga Teknik para sa "Pressed In" at "Raised Card" na Epekto

Ang pagmamanipula sa mga katangian ng anino ay nagbibigay-daan sa paglikha ng iba't ibang visual cues para sa mga user:

Epekto Pahalang/Patayong Offset Blur Spread Inset Kulay at Opacity
Raised Card (Nakaangat) Maliit na patayong offset (hal. 4px hanggang 8px) Katamtamang blur (hal. 16px hanggang 24px) Negatibong spread (hal. -4px) Naka-off Mababang opacity (hal. 10% hanggang 20%) para sa malambot na transisyon
Pressed In (Nakalubog) Maliit na patayong offset (hal. 2px hanggang 4px) Maliit na blur (hal. 4px hanggang 8px) Zero o positibong spread Naka-on Katamtamang opacity para sa mas malinaw na gilid sa loob ng elemento

Ang paggamit ng negatibong spread sa mga nakaangat na card ay nakatutulong upang limitahan ang anino sa ilalim lamang ng elemento, na nagpapakita ng mas natural na direksyon ng liwanag mula sa itaas.

Pagproseso at Seguridad ng Data

Ang lahat ng pag-render at kalkulasyon ng anino ay direktang nagaganap sa iyong web browser. Walang anumang data, kulay, o value na iyong inilalagay ang ina-upload sa BroBroGo. Dahil dito, ang iyong mga ginagawang disenyo ay nananatiling pribado sa iyong lokal na makina habang ginagamit mo ang tool.

Mga Madalas Itanong (FAQ)

Ano ba talaga ang kinokontrol ng offset, blur, at spread?
Inuusog ng offset ang anino pakaliwa/pakanan at pataas/pababa, pinapalambot ng blur ang mga gilid nito, at pinalalaki o pinapaliit naman ito ng spread bago i-blur. Ang negatibong spread ay humihila sa anino papasok, na kapaki-pakinabang para sa masinsin at malapit na anino.

Ano ang ginagawa ng inset option?
Ang normal na anino ay lumalabas sa labas ng elemento, tulad ng liwanag sa likod ng nakaangat na card. Ang inset naman ay nagbabaligtad nito papasok, kaya magmumukhang nakalubog ang elemento — kapaki-pakinabang para sa mga sunken input o pinindot na button.

Bakit kailangang magpatong ng higit sa isang layer ng anino?
Ang nag-iisang anino ay mukhang flat kapag lumampas sa partikular na laki. Ang totoong elevation ay karaniwang pinagsasama ang masinsin at madilim na anino sa malambot at mas malawak na anino — magdagdag ng pangalawang layer at i-tune ang bawat isa nang magkahiwalay para makuha ang epektong iyon.

CSS Cubic Bezier GeneratorI-drag ang dalawang handle para hubugin ang easing curve, panoorin ang paggalaw ng dot kumpara sa steady na dot, at kopyahin ang cubic-bezier() value.Gradient GeneratorBumuo ng linear, radial, o conic na gradient, magdagdag ng mga color stop at i-set ang direksyon, pagkatapos ay kopyahin ang CSS sa isang click lang.Border Radius GeneratorBilugin ang bawat sulok gamit ang mga slider, humubog ng mga organic blob gamit ang elliptical mode, at kopyahin ang CSS agad-agad.Flexbox GeneratorMag-set up ng flex container at ng mga item nito gamit ang mga visual na kontrol, panoorin ang reaksyon ng layout nang live, at kopyahin ang CSS sa isang click lang.CSS Grid GeneratorI-set ang iyong mga column at row, i-drag sa mga cell para maglagay ng mga item, at kopyahin ang grid CSS kasama ang katugmang HTML sa isang click lang.CSS clamp() CalculatorMaglagay ng sukat para sa maliliit at malalaking screen at kumuha ng fluid na clamp() value na maayos na nag-i-scale sa pagitan — para sa mga sukat ng font, padding, margin o gap.Color ConverterMag-convert ng mga kulay sa pagitan ng HEX, RGB, HSL, HSV, CMYK, at LAB — i-edit ang kahit anong field at ang iba ay mag-a-update habang nagpapatuloy ka.CSS Beautifier & MinifierI-reindent ang magulong CSS para madaling basahin, o i-minify para sa mas maliit na file — may safe mode na hindi kailanman nagbabago sa pagkakasunod-sunod ng iyong mga rule.Contrast CheckerMaglagay ng kulay ng text at background para makita ang WCAG contrast ratio at kung aling mga antas ng AA at AAA ang pumapasa.