CSS बॉक्स शैडो जेनरेटर — मुफ़्त ऑनलाइन
ऑफसेट, ब्लर, स्प्रेड और रंग के नियंत्रण से CSS बॉक्स शैडो विजुअली बनाएं।
Who uses the CSS बॉक्स शैडो जेनरेटर?
- अपने डिज़ाइन सिस्टम की स्पेसिफिकेशन से मेल खाने वाली कार्ड और बटन शैडो जनरेट करने वाले UI डेवलपर।
- एक विज़ुअल, तुरंत फ़ीडबैक देने वाले इंटरफ़ेस के ज़रिए शैडो प्रॉपर्टीज़ एक्सप्लोर करने वाले CSS सीखने वाले।
- डेवलपर्स को सौंपने से पहले मॉकअप के लिए शैडो इफ़ेक्ट बनाने और टेस्ट करने वाले डिज़ाइनर।
How the CSS बॉक्स शैडो जेनरेटर works
अपनी शैडो को आकार देने के लिए X ऑफ़सेट, Y ऑफ़सेट, ब्लर रेडियस, और स्प्रेड रेडियस स्लाइडर एडजस्ट करें।
शैडो का रंग चुनने के लिए कलर स्वैच पर क्लिक करें, और उसके बगल में मौजूद ओपैसिटी स्लाइडर इस्तेमाल करें।
इनर शैडो इफ़ेक्ट के लिए Inset टॉगल करें।
कोड आउटपुट पैनल से CSS कॉपी करें।
Tips & tricks
- यह टूल एक सिंगल शैडो लेयर आउटपुट करता है — मल्टी-लेयर इफ़ेक्ट (जैसे Material Design एलिवेशन) के लिए, यहां हर लेयर अलग-अलग जनरेट करें और उन्हें मैन्युअली कॉमा से मिलाएं।
- बड़े ब्लर के साथ नेगेटिव स्प्रेड एक नरम, फैली हुई शैडो बनाता है जो टाइट पॉज़िटिव-स्प्रेड शैडो से ज़्यादा "तैरती हुई" लगती है।
- इनसेट शैडो दबे हुए बटन की स्थिति के लिए अच्छी तरह काम करती है — कम ओपैसिटी वाले गहरे रंग के साथ छोटा ब्लर आज़माएं।
- ओपैसिटी स्लाइडर शैडो के रंग के alpha चैनल को नियंत्रित करता है, न कि एलिमेंट की खुद की ओपैसिटी को।
Frequently Asked Questions
CSS box-shadow का सिंटैक्स क्या है?
box-shadow: [inset] X-ऑफ़सेट Y-ऑफ़सेट ब्लर-रेडियस स्प्रेड-रेडियस रंग। उदाहरण: box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)। कई शैडो कॉमा से अलग होती हैं।
स्प्रेड रेडियस क्या करता है?
स्प्रेड रेडियस ब्लर होने से पहले शैडो को फैलाता या सिकोड़ता है। पॉज़िटिव वैल्यू शैडो को एलिमेंट से बड़ा बना देती हैं; नेगेटिव वैल्यू इसे छोटा कर देती हैं। 8px ब्लर के साथ -4px का स्प्रेड एक फ़ोकस्ड, दिशा वाली शैडो बनाता है।
इनसेट शैडो क्या है?
Inset चेकबॉक्स चुनने से शैडो एलिमेंट के बॉर्डर के बाहर के बजाय अंदर दिखती है। इनर शैडो दबे हुए/धंसे हुए बटन की स्थिति, इनसेट कार्ड इफ़ेक्ट, और इनर ग्लो बनाती हैं।
क्या यह टूल Material Design एलिवेशन जैसी कई परतों वाली शैडो जनरेट कर सकता है?
नहीं — यह टूल एक बार में एक शैडो परत जनरेट करता है। Material Design एलिवेशन जैसे मल्टी-लेयर इफ़ेक्ट के लिए (box-shadow: 0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0px rgba(0,0,0,0.14), 0 1px 10px 0px rgba(0,0,0,0.12)), यहां हर परत अलग-अलग जनरेट करें और कॉमा से अलग की गई वैल्यू को मैन्युअली मिलाएं।
क्या box-shadow लेआउट को प्रभावित करता है और जगह लेता है?
नहीं। margin या padding के विपरीत, box-shadow लेआउट को प्रभावित नहीं करता — शैडो वाले एलिमेंट पड़ोसी एलिमेंट को धकेलते नहीं हैं। इससे पेज लेआउट को बिगाड़े बिना शैडो जोड़ना सुरक्षित हो जाता है।
Is my data safe when using the CSS बॉक्स शैडो जेनरेटर?
Completely safe. The CSS बॉक्स शैडो जेनरेटर processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSS बॉक्स शैडो जेनरेटर output in commercial projects?
Yes. The CSS बॉक्स शैडो जेनरेटर is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSS बॉक्स शैडो जेनरेटर follow official standards?
Yes. The CSS बॉक्स शैडो जेनरेटर is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.