CSS Box Shadow Generator
Gumawa ng box-shadow sa pamamagitan ng paggalaw ng mga slider at panonood ng resulta sa isang card. Mag-stack ng hanggang anim na layer para sa mas malambot at mas makatotohanang anino, gamitin ang inset para sa pressed effect, at magsimula sa presets tulad ng soft, floating, glow o neumorphism. Kopyahin ang CSS sa isang click.
Paano ito gamitin
- Pumili ng preset o i-adjust ang offset, blur, spread, kulay at opacity ng anino.
- Magdagdag ng layer gamit ang + at piliin ang bawat isa para i-edit; baguhin ang background, kulay ng box at corner radius para tumugma sa disenyo mo.
- Kopyahin ang CSS at i-paste ito sa rule ng element.
Mga madalas itanong
Ano ang ginagawa ng blur at spread?
Pinalalambot ng blur ang gilid ng anino; ang zero ay matigas na gilid. Pinalalaki ng spread ang anino sa lahat ng direksyon bago mag-blur, at pinaliliit ito ng negatibong spread, na nakakatulong para manatili sa ilalim ng element ang malaki at malabong anino.
Bakit gagamit ng maraming layer ng anino?
Mas madilim ang tunay na anino malapit sa bagay at lumalabo habang lumalayo. Ginagaya ito ng pagsasama ng maliit at matalas na anino sa mas malaki at malambot, at mas natural ang itsura kaysa sa iisang anino. Ang unang layer sa listahan ang nasa ibabaw.
Pinabagal ba ng box-shadow ang page?
Hindi sa karaniwang gamit. Ang napakalaking blur sa maraming element, o ang pag-animate mismo ng anino, ay maaaring makaapekto sa performance ng mabagal na telepono; para mag-animate, palitan na lang ang opacity ng pseudo-element na may anino.
🏷️ Meta Tag Generator
🖼️ Open Graph Generator
🔗 UTM Builder
🌈 CSS Gradient Generator