CSS Box Shadow जेनरेटर
इस विज़ुअल जेनरेटर से खूबसूरत, स्मूथ CSS shadow बनाएं। offset, blur, spread, और color एडजस्ट करें, फिर कोड कॉपी करें।
आखिरी बार अपडेट किया गया: 2026-03-19
शैडो कंट्रोल
लाइव प्रीव्यू
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);मुख्य विशेषताएं
- विज़ुअल कंट्रोल: X/Y ऑफ़सेट, ब्लर रेडियस, स्प्रेड, और ओपैसिटी के लिए स्लाइडर।
- रियल-टाइम प्रीव्यू: देखें कि कार्ड एलिमेंट पर शैडो कैसा दिखता है।
- इनसेट सपोर्ट: बाहरी (ड्रॉप) शैडो और आंतरिक शैडो के बीच टॉगल करें।
- कॉपी रेडी: सटीक CSS प्रॉपर्टी कॉपी करने के लिए वन-क्लिक।
इस Box Shadow जेनरेटर का उपयोग कैसे करें
- शैडो को मूव करने के लिए हॉरिज़ॉन्टल और वर्टिकल स्लाइडर उपयोग करें।
- ब्लर हल्का या तेज़ करने के लिए ब्लर रेडियस एडजस्ट करें।
- शैडो का आकार बढ़ाने/घटाने के लिए स्प्रेड उपयोग करें।
- ओपैसिटी स्लाइडर से पारदर्शिता कंट्रोल करें।
- इनर शैडो (जैसे दबा हुआ बटन) बनाने के लिए Inset चेक करें।
- जेनरेट किया गया CSS कॉपी करें और अपनी स्टाइलशीट में पेस्ट करें।
CSS Shadow के लिए UI जेनरेटर का उपयोग क्यों करें?
`box-shadow` प्रॉपर्टी हाथ से लिखने में पिक्सेल वैल्यू का अनुमान लगाना और रिज़ल्ट देखने के लिए बार-बार रिफ़्रेश करना शामिल है। यह टूल आपको शैडो के "फ़ील" को तुरंत विज़ुअली ट्वीक करने देता है। आप जटिल पैरामीटर क्रम याद किए बिना आसानी से आधुनिक "एलिवेशन" इफ़ेक्ट या सूक्ष्म डेप्थ लेयर बना सकते हैं।
अक्सर पूछे जाने वाले सवाल
box-shadow वैल्यू का क्रम क्या है?
स्टैंडर्ड क्रम है: `h-offset v-offset blur spread color`. यदि inset उपयोग कर रहे हैं, तो `inset` कीवर्ड पहले या आखिर में आता है।
मैं सॉफ़्ट शैडो कैसे बनाऊं?
ब्लर रेडियस बढ़ाएं और ओपैसिटी कम करें। सॉफ़्ट शैडो में आमतौर पर 0 स्प्रेड और ज़्यादा ब्लर होता है।
क्या मैं कई शैडो लेयर कर सकता हूं?
CSS कॉमा से अलग किए गए कई शैडो सपोर्ट करता है। यह सिंपल जेनरेटर एक ही शैडो लेयर बनाता है, जो 90% उपयोग मामलों के लिए पर्याप्त है।
क्या स्प्रेड आवश्यक है?
नहीं, स्प्रेड रेडियस वैकल्पिक है। छोड़े जाने पर यह डिफ़ॉल्ट रूप से 0 (एलिमेंट के समान आकार) होता है।
क्या यह text-shadow के लिए काम करता है?
Syntax बहुत समान है, लेकिन `text-shadow` `spread` वैल्यू या `inset` कीवर्ड सपोर्ट नहीं करता। आप text shadow के लिए पहली तीन वैल्यू (offset और blur) उपयोग कर सकते हैं।
क्या यह सभी ब्राउज़रों में काम करता है?
हां, `box-shadow` सभी आधुनिक ब्राउज़रों (Chrome, Firefox, Safari, Edge) में पूरी तरह सपोर्टेड है।
प्रीव्यू
