CSS बॉक्स शैडो जनरेटर
कई लेयर, इनसेट शैडो, ब्लर, स्प्रेड और रंग के साथ CSS बॉक्स शैडो विज़ुअली डिज़ाइन करें। लाइव प्रीव्यू, CSS, SCSS या Tailwind में एक्सपोर्ट।
CSS बॉक्स शैडो जनरेटर लोड हो रहा है…
आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं
CSS बॉक्स शैडो जनरेटर का इस्तेमाल कैसे करें
- 1
इस पेज पर CSS बॉक्स शैडो जनरेटर खोलें। यह सीधे आपके ब्राउज़र में लोड होता है।
- 2
अपनी फ़ाइल, टेक्स्ट या वैल्यू जोड़ें और सेटिंग बदलें।
- 3
नतीजा कॉपी या डाउनलोड करें। कुछ भी अपलोड या स्टोर नहीं होता।
इस टूल के बारे में
CSS की box-shadow प्रॉपर्टी कार्ड, बटन और इमेज में गहराई जोड़ती है, लेकिन वैल्यू हाथ से लिखना अंदाज़े का खेल है। यह बॉक्स शैडो जनरेटर आपको स्लाइडर से शैडो डिज़ाइन करने और उसे लाइव प्रीव्यू बॉक्स पर देखने देता है।
फिर आप साफ़ कोड CSS, SCSS या Tailwind कॉन्फ़िग एंट्री के रूप में कॉपी कर सकते हैं।
बॉक्स शैडो कैसे बनाएँ
- शैडो खिसकाने के लिए हॉरिज़ॉन्टल और वर्टिकल ऑफ़सेट सेट करें।
- नरम किनारे के लिए ब्लर बढ़ाएँ और शैडो बड़ा या छोटा करने के लिए स्प्रेड बदलें।
- रंग और ओपेसिटी चुनें।
- शैडो को बॉक्स के अंदर रखने के लिए inset पर टिक करें।
- और लेयर जोड़ें, उन्हें डुप्लिकेट या डिलीट करें, और हर एक को चालू या बंद करें।
- अपने डिज़ाइन से मिलाने के लिए प्रीव्यू बॉक्स का रंग और बैकग्राउंड बदलें, फिर कोड कॉपी करें।
box-shadow सिंटैक्स
box-shadow: [inset] offset-x offset-y blur spread color;
उदाहरण के लिए box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15); एलिमेंट के ठीक नीचे एक नरम शैडो देता है। कई शैडो को कॉमा से अलग करके जोड़ा जा सकता है, और पहला सबसे ऊपर बनता है।
शैडो के नुस्खे
- नरम कार्ड: छोटा ऑफ़सेट, बड़ा ब्लर, कम ओपेसिटी, जैसे 10 से 15 प्रतिशत काले के साथ 0 4px 12px।
- असली जैसी गहराई: दो लेयर, एक एलिमेंट के पास कसी हुई और गहरी, दूसरी दूर तक फैली और बहुत हल्की।
- दबा हुआ बटन: ऊपरी किनारे पर इनसेट शैडो।
- ग्लो या नियॉन: शून्य ऑफ़सेट, बड़ा ब्लर और चमकीले रंग का शैडो; ज़्यादा असर के लिए दो रंग एक के ऊपर रखें।
- केंद्रित शैडो: नेगेटिव स्प्रेड शैडो को बॉक्स से पतला रखता है, ताकि वह सिर्फ़ नीचे दिखे।
सुझाव
- पूरे इंटरफ़ेस में रोशनी की एक ही दिशा रखें, आमतौर पर ऊपर से, ताकि सभी शैडो एक ही तरफ़ गिरें।
- ज़्यादा प्राकृतिक लुक के लिए शुद्ध काले के बजाय बैकग्राउंड रंग के गहरे शेड से शैडो रंगें।
- परफ़ॉर्मेंस पर ध्यान दें: बहुत सारे एलिमेंट पर बहुत बड़ा ब्लर पुराने फ़ोन पर स्क्रॉलिंग धीमी कर सकता है।
शैडो को बॉर्डर रेडियस जनरेटर के गोल कोनों और CSS ग्रेडिएंट जनरेटर के बैकग्राउंड के साथ जोड़ें।
अक्सर पूछे जाने वाले सवाल
box-shadow की वैल्यू का क्या मतलब है?
क्रम से: हॉरिज़ॉन्टल ऑफ़सेट, वर्टिकल ऑफ़सेट, ब्लर रेडियस, स्प्रेड रेडियस और रंग। शैडो को एलिमेंट के अंदर बनाने के लिए शुरू में inset शब्द जोड़ें।
एक से ज़्यादा शैडो कैसे जोड़ें?
जनरेटर में एक और लेयर जोड़ें। CSS में कई शैडो एक ही box-shadow प्रॉपर्टी में कॉमा से अलग करके लिखे जाते हैं।
इनसेट शैडो क्या है?
ऐसा शैडो जो एलिमेंट के बॉर्डर के बाहर की जगह अंदर बनता है, अक्सर दबे हुए बटन और इनपुट फ़ील्ड के लिए इस्तेमाल होता है।
क्या शैडो को Tailwind क्लास के रूप में पा सकते हैं?
हाँ। Tailwind एक्सपोर्ट tailwind.config.js के लिए boxShadow एंट्री देता है, ताकि आप शैडो को shadow-custom जैसी कस्टम क्लास के रूप में इस्तेमाल कर सकें।
नेगेटिव स्प्रेड क्या करता है?
यह शैडो को एलिमेंट से छोटा कर देता है, ताकि वह सिर्फ़ ऑफ़सेट वाली तरफ़ झाँके, जिससे शैडो ज़्यादा कसा और केंद्रित लगता है।
मेरा शैडो बहुत गहरा क्यों दिखता है?
ओपेसिटी कम करें, ब्लर बढ़ाएँ, या शुद्ध काले की जगह बैकग्राउंड रंग का गहरा शेड इस्तेमाल करें।