CSS Box Shadow Generator
यह tool क्या करता है
X/Y offset, blur, spread, color और opacity sliders से adjust करें और shadow live update होता देखें। Inset toggle करके outer और inner shadow के बीच switch करें। Depth effects के लिए multiple shadow layers जोड़ें। Preset apply करके जल्दी शुरू करें। CSS code एक click में copy करें।
उपयोग कैसे करें
- Preset चुनें या default से शुरू करें।
- Offset, blur, spread और opacity के sliders adjust करें।
- Shadow color बदलने के लिए color swatch click करें।
- Inner shadow के लिए Inset toggle करें। Depth के लिए + Layer जोड़ें उपयोग करें।
- Generated CSS copy करने के लिए कॉपी करें click करें।
अक्सर पूछे जाने वाले प्रश्न
CSS box-shadow क्या है?
CSS की `box-shadow` property किसी element के चारों ओर छाया जोड़ती है। पूरा syntax है `box-shadow: [inset] x-offset y-offset blur spread color`। कई छायाएँ comma से अलग करके एक के ऊपर एक लगाई जा सकती हैं।
Inset विकल्प क्या करता है?
Inset चालू होने पर छाया element के बाहर नहीं, अंदर दिखती है। इससे दबा हुआ या धँसा हुआ असर बनता है, जो अक्सर अंदरूनी चमक या दबे हुए बटन के लिए इस्तेमाल होता है।
Spread value क्या है?
Spread blur लगने से पहले छाया को बड़ा या छोटा करता है। Positive value छाया को element से बड़ा बनाती है और negative value छोटा। Spread 0 का मतलब छाया element के बराबर है।
कई layers वाली छाया कैसे बनाएँ?
नई छाया layer बनाने के लिए '+ लेयर जोड़ें' पर क्लिक करें। हर layer की अपनी offset, blur, spread, रंग और opacity सेटिंग होती है। CSS आउटपुट में layers comma से जुड़ती हैं, जो मानक CSS है और सभी आधुनिक ब्राउज़र में चलता है।
box-shadow और drop-shadow में क्या अंतर है?
box-shadow element के आयताकार bounding box पर लगती है और पारदर्शिता को अनदेखा करती है। `filter: drop-shadow()` element के दिखने वाले आकार (पारदर्शी हिस्सों समेत) के साथ चलती है, इसलिए SVG या पारदर्शी बैकग्राउंड वाली PNG जैसे गैर-आयताकार elements के लिए बेहतर है।