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.

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.