UI Shadow Scale Generator
Itakda ang mga sangkap ng shadow, tingnan ang paakyat na preview, at kopyahin ang CSS token para sa interface.
I-adjust ang controls para i-update ang scale.
Pantulong lang sa design: walang garantiya sa accessibility o visual quality. Suriin sa produkto.
Paano gamitin
Paano gamitin
- Pumili ng base color, blur, spread, opacity, at bilang ng level.
- Suriin ang stacked preview at mga token declaration.
- Kopyahin ang CSS at suriin ang bawat shadow sa aktuwal na surface, contrast, at interaction state.
Panimulang visual design
Gumagawa ito ng box-shadow na tumataas ang offset, blur, at opacity. Iangkop ito sa sarili mong surface at component.
Lokal at makokopya
Sa browser na ito ginagawa ang lahat ng kalkulasyon at preview; plain CSS custom properties ang output.
Pantulong lang sa design
Hindi ginagarantiya ng preview ang accessibility, contrast, visual quality, o pagiging angkop sa bawat display at background. Magbigay ng ibang malinaw na cue para sa mahahalagang state.
Mga madalas itanong
Maaari mo ring alamin
Paano tumataas ang level?
Tumataas ang vertical offset, blur, at opacity sa bawat level bilang simpleng panimulang scale.
Sapat na ba ang shadow para sa accessibility?
Hindi. Pantulong lang sa design ang shadow. Gumamit din ng text, border, kulay, o ibang malinaw na cue.
Ina-upload ba ang input?
Hindi. Lokal na ginagawa sa browser ang preview at CSS.