शैडो जनरेटर

लाइव पूर्वावलोकन के साथ कई box-shadow या filter:drop-shadow परतें जोड़ें

गहराई प्रभाव बनाने के लिए कई शैडो परतें जोड़ें। ठोस तत्वों के लिए box-shadow (inset और spread सपोर्ट करता है) या पारदर्शी आकृतियों (PNG, SVG) के लिए filter:drop-shadow उपयोग करें। प्रत्येक परत ट्यून करने पर लाइव पूर्वावलोकन अपडेट होता है।

box-shadow

drop-shadow

शैडो परतें

ब्लर

फैलाव

inset

पूर्वावलोकन

CSS

box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15);

कैसे उपयोग करें

Segmented control का use करके box-shadow और drop-shadow mode के बीच choose करें।
First shadow layer के लिए offset X, offset Y, blur, spread, और color को adjust करें।
'+ Layer' को click करें multiple shadows को stack करने के लिए और हर एक को independently configure करें।
Live shadow preview box पर combined effect को preview करें।
Output section से generated CSS declaration को copy करें और इसे अपनी stylesheet में paste करें।

उदाहरण

offsetY=4, blur=12, spread=0, color=rgba(0,0,0,0.15) को set करने से standard card shadow produce करता है: box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.15)।
Second layer को offsetY=1, blur=3, और color=rgba(0,0,0,0.08) के साथ add करने से layered depth effect create करता है material-style UI में popular।

उत्पादन में उपयोग से पहले आउटपुट सत्यापित करें। कोई वारंटी नहीं — देखें शर्तें.