CSS बॉक्स-शैडो जनरेटर

CSS बॉक्स-शैडो जनरेटर क्या है?

CSS बॉक्स-शैडो जनरेटर CSS box-shadow प्रॉपर्टी के लिए एक मुफ़्त विज़ुअल एडिटर है, जो फ्रंट-एंड डेवलपर्स और डिज़ाइनरों के लिए बनाया गया है। एक या अधिक शैडो परतें जोड़ें और हर परत का offset-x, offset-y, ब्लर त्रिज्या, स्प्रेड त्रिज्या, रंग और inset विकल्प सरल संख्या इनपुट और रंग पिकर से समायोजित करें। शतरंज की बिसात जैसी पृष्ठभूमि पर एक लाइव प्रीव्यू बॉक्स संयुक्त परिणाम को वास्तविक समय में दिखाता है, और पूरा box-shadow घोषणा — हर परत को अल्पविराम से अलग करते हुए — आपके कॉपी करने के लिए जनरेट होता है। इसका उपयोग कोमल उन्नयन शैडो, तीखा न्यूमॉर्फिज़म, ग्लो प्रभाव, या मानों का क्रम याद किए बिना Material-शैली की परतदार गहराई बनाने के लिए करें।

CSS बॉक्स-शैडो जनरेटर का उपयोग कैसे करें

1. पहली परत का offset-x और offset-y (px में) सेट करें ताकि शैडो क्षैतिज और लंबवत खिसके; ऋणात्मक मान इसे बाएं या ऊपर खिसकाते हैं।
2. ब्लर त्रिज्या (शैडो कितनी कोमल है) और स्प्रेड त्रिज्या (यह कितना बढ़ता या घटता है) समायोजित करें।
3. स्वैच से रंग चुनें या एक हेक्स मान टाइप करें — #00000040 जैसा 8-अंकीय हेक्स शैडो की पारदर्शिता सेट करता है।
4. शैडो को तत्व के बाहर के बजाय अंदर बनाने के लिए inset चेकबॉक्स पर निशान लगाएं।
5. ऊपर एक और शैडो जमाने के लिए परत जोड़ें पर क्लिक करें, फिर मान संपादित करके पुनः व्यवस्थित करें; किसी भी परत को उसके ट्रैश बटन से हटाएं।
6. प्रीव्यू को अपडेट होते देखें, फिर जनरेट किए गए box-shadow CSS को अपनी स्टाइलशीट में कॉपी करें।

उदाहरण

x 0, y 4, ब्लर 12, स्प्रेड 0, रंग #00000040

box-shadow: 0px 4px 12px 0px #00000040;

परत 1: 0 1 2 0 #0000001a · परत 2: 0 8 24 -4 #00000026

box-shadow: 0px 1px 2px 0px #0000001a, 0px 8px 24px -4px #00000026;

inset चेक किया, x 0, y 2, ब्लर 6, स्प्रेड 0, रंग #00000059

box-shadow: inset 0px 2px 6px 0px #00000059;

अक्सर पूछे जाने वाले सवाल

box-shadow मानों का क्रम क्या है?

हर परत offset-x, offset-y, ब्लर त्रिज्या, स्प्रेड त्रिज्या, रंग के रूप में लिखी जाती है, जिसके आगे वैकल्पिक inset कीवर्ड होता है। यह टूल हमेशा चारों लंबाइयाँ px में आउटपुट करता है (offset-x, offset-y, ब्लर, स्प्रेड), इसलिए क्रम स्पष्ट रहता है और बाद में हाथ से समायोजित करना आसान होता है।

क्या मैं अर्ध-पारदर्शी या रंगीन शैडो जोड़ सकता हूं?

हां। रंग फ़ील्ड में कोई भी CSS रंग टाइप करें — #00000040 जैसा पूरा 8-अंकीय हेक्स (अंतिम दो अंक अल्फा हैं) एक अर्ध-पारदर्शी शैडो देता है, और आप नामित रंग या कोई भी हेक्स उपयोग कर सकते हैं। पिकर स्वैच ठोस #rrggbb रंगों को संभालता है; अल्फा के लिए टेक्स्ट फ़ील्ड संपादित करें।

मैं कई शैडो कैसे जमाऊं?

हर अतिरिक्त शैडो के लिए परत जोड़ें पर क्लिक करें। जनरेट किया गया CSS हर परत को ऊपर से नीचे क्रम में अल्पविराम से अलग करता है — पहली परत सबसे आख़िर में (सबसे ऊपर) बनाई जाती है। इसका उपयोग Material-शैली की परतदार गहराई के लिए या एक बाहरी ग्लो को inset हाइलाइट के साथ जोड़ने के लिए करें।

inset चेकबॉक्स क्या करता है?

inset शैडो को तत्व की सीमा के अंदर बनाता है, जिससे बाहरी ड्रॉप शैडो के बजाय दबी हुई या आंतरिक-ग्लो जैसी दिखावट बनती है। इसे प्रति परत निशान लगाएं; आप एक ही box-shadow मान में inset और बाहरी शैडो मिला सकते हैं।

क्या मेरा डेटा कहीं अपलोड होता है?

नहीं। जनरेटर पूरी तरह आपके ब्राउज़र में JavaScript के साथ चलता है — आपके रंग और मान कभी किसी सर्वर पर नहीं भेजे जाते, इसलिए यह निजी रूप से और पेज लोड होने के बाद ऑफ़लाइन भी काम करता है।