परिणाम केवल जानकारी के उद्देश्य से दिए गए हैं और उनमें त्रुटियाँ हो सकती हैं। महत्वपूर्ण जानकारी की स्वतंत्र रूप से पुष्टि करें। इस टूल का उपयोग आपके अपने जोखिम पर है।
यह टूल क्या करता है
बॉक्स शैडो जेनरेटर हॉरिज़ॉन्टल ऑफ़सेट, वर्टिकल ऑफ़सेट, ब्लर, स्प्रेड, रंग और ओपैसिटी के स्लाइडरों से CSS box-shadow बनाता है। स्लाइडर खींचते समय प्रीव्यू बॉक्स अपडेट होता रहता है और आउटपुट लाइन कॉपी करने के लिए तैयार रहती है। शुरुआत में एक हल्की शैडो होती है: बॉक्स से 10px नीचे, 20px ब्लर और 25% काला रंग।
चारों लंबाइयाँ CSS के क्रम में लिखी जाती हैं: x ऑफ़सेट, y ऑफ़सेट, ब्लर रेडियस, स्प्रेड रेडियस। पॉज़िटिव ऑफ़सेट शैडो को दाएँ और नीचे ले जाते हैं; नेगेटिव मान उसे बाएँ और ऊपर ले जाते हैं। ब्लर किनारे को नरम करता है, और स्प्रेड ब्लर से पहले शैडो को बड़ा या छोटा करता है। रंग rgba() में लिखा जाता है, ताकि ओपैसिटी उसी में शामिल रहे और शैडो किसी भी बैकग्राउंड के साथ घुल-मिल जाए।
कब इस्तेमाल करें
- फ़्लैट डिज़ाइन में कार्ड, मोडल और ड्रॉपडाउन को गहराई देना।
- Material Design जैसे डिज़ाइन सिस्टम के एलिवेशन लेवल से मेल बिठाना।
- बटनों पर हल्का फ़ोकस या होवर इफ़ेक्ट जोड़ना।
- ज़ीरो ऑफ़सेट और चमकीले रंग से रंगीन ग्लो बनाना।
उदाहरण
इनपुट
X 0, Y 10, ब्लर 20, स्प्रेड 0, रंग #000000, ओपैसिटी 25%आउटपुट
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);इस टूल के बारे में सवाल
अंदरूनी शैडो कैसे बनाऊँ?
मान की शुरुआत में inset कीवर्ड जोड़ें: box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25);। तब शैडो बॉक्स के अंदर बनती है, जो दबे हुए बटनों और इनपुट फ़ील्ड के लिए ठीक रहती है।
क्या मैं कई शैडो एक साथ इस्तेमाल कर सकता हूँ?
हाँ, उन्हें कॉमा से अलग करें। असली जैसा एलिवेशन अक्सर दो शैडो से बनता है: किनारे के लिए एक छोटी तीखी शैडो और गहराई के लिए एक बड़ी नरम शैडो, जैसे 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12)।
रंगीन बैकग्राउंड पर मेरी शैडो धूसर और गंदी क्यों दिखती है?
कम ओपैसिटी वाला शुद्ध काला रंग नीचे के रंगों को फीका कर देता है। ज़्यादा साफ़ नतीजे के लिए काले की जगह बैकग्राउंड रंग का ही गहरा शेड इस्तेमाल करें।
क्या शैडो पेज को धीमा करती हैं?
स्थिर शैडो का खर्च बहुत कम होता है। बड़ी ब्लर वाली शैडो को ऐनिमेट करने से धीमे डिवाइस पर फ़्रेम छूट सकते हैं; इसकी जगह शैडो वाले किसी स्यूडो-एलिमेंट की opacity ऐनिमेट करें।
क्या यह टूल मुफ़्त है?
हाँ, यह मुफ़्त है। पंजीकरण या ईमेल की ज़रूरत नहीं। परिणाम इसी पेज पर मिलता है।
मेरा परिणाम कहाँ मिलेगा?
इसी पेज पर टूल का उपयोग करें। परिणाम यहीं दिखता है, ईमेल से प्राप्त करने की ज़रूरत नहीं है।