CSS Box Shadow Generator क्या बनाता है?

यह आपके द्वारा कॉन्फ़िगर की गई एक या अधिक लेयर्स से बना एक पूरा box-shadow CSS declaration बनाता है, हर एक की अपनी offset, blur, spread, color और inset सेटिंग होती है, जो stylesheet में पेस्ट करने के लिए तैयार होता है।

क्या CSS Box Shadow Generator कई stacked shadows बना सकता है?

हां। जितनी shadow लेयर्स चाहिए उतनी स्टैक करने के लिए Add layer पर क्लिक करें — CSS का box-shadow कॉमा-सेपरेटेड लेयर्स को सपोर्ट करता है, और टूल उन्हें सही क्रम में जोड़ता है।

inset box-shadow क्या होता है?

एक inset box-shadow एलिमेंट के बॉक्स के पीछे के बजाय उसके अंदर रेंडर होता है, जो pressed-button इफेक्ट्स या सूक्ष्म inner borders के लिए उपयोगी है। किसी भी लेयर पर Inset टॉगल करके इसे बदलें।

क्या CSS Box Shadow Generator rgba और hex कलर्स सपोर्ट करता है?

हां। किसी भी वैध CSS color — hex, rgb(), या rgba() — को लेयर के color फील्ड में टाइप करें, या hex वैल्यू के लिए कलर पिकर इस्तेमाल करें; rgba से आप shadow की opacity को अलग से कंट्रोल कर सकते हैं।

क्या CSS Box Shadow Generator मेरी डिज़ाइन वैल्यू अपलोड करता है?

नहीं। सभी shadow लेयर्स और जनरेट हुआ CSS आपके ब्राउज़र में ही रहते हैं। आपके डिज़ाइन का कोई भी डेटा ArrayKit या किसी सर्वर पर अपलोड नहीं होता।

हार्ड एज के बजाय soft, realistic shadow कैसे पाएं?

offset के सापेक्ष बड़ी blur वैल्यू इस्तेमाल करें, और एक छोटी tight shadow को एक बड़ी soft shadow के साथ लेयर करने पर विचार करें — यह two-layer approach यह नकल करता है कि असली रोशनी में shadows कैसी दिखती हैं।

CSS Box Shadow Generator

लाइव प्रीव्यू के साथ लेयर्ड CSS शैडो बनाएं

CSS Box Shadow Generator पूरी तरह आपके ब्राउज़र में चलता है। आपकी बनाई shadow लेयर्स और जनरेट हुआ CSS कभी भी आपकी डिवाइस से बाहर नहीं जाते और कुछ भी ArrayKit को अपलोड नहीं होता।

CSS Grid Generator खोलें

CSS Box Shadow Generator के बारे में

CSS Box Shadow Generator एक box-shadow CSS declaration बनाता है, जिसमें आप कितनी भी shadow लेयर्स को स्टैक कर सकते हैं, हर एक की अपनी offset, blur, spread, color और inset toggle होती है। जैसे ही आप वैल्यू बदलते हैं, एक लाइव प्रीव्यू बॉक्स तुरंत अपडेट होता है, ताकि कोड कॉपी करने से पहले आप देख सकें कि shadow कैसी दिख रही है। एक soft ambient shadow को tight contact shadow के नीचे लेयर करके realistic depth बनाएं, या pressed-button लुक के लिए एक inset और एक outset लेयर को मिलाएं। यह फ्रंट-एंड डेवलपर्स, डिज़ाइनर्स और उन सभी के लिए बनाया गया है जो कार्ड्स, बटन्स या मॉडल्स को स्टाइल करते हैं और stylesheet में pixel offsets को मैन्युअली ट्यून किए बिना सटीक box-shadow वैल्यू चाहते हैं। सब कुछ आपके ब्राउज़र में लोकली चलता है — कोई भी CSS या डिज़ाइन डिटेल कहीं भी अपलोड नहीं होती।

विशेषताएँ

असीमित shadow लेयर्स स्टैक करें, हर एक की स्वतंत्र x, y, blur, spread और color
किसी भी लेयर को drop shadow और inset shadow के बीच टॉगल करें
एडिट करते समय लाइव प्रीव्यू बॉक्स सभी लेयर्स का संयुक्त प्रभाव दिखाता है
कलर पिकर के साथ एक टेक्स्ट फील्ड, जिससे आप hex, rgb या rgba वैल्यू सीधे टाइप कर सकें
कॉपी-रेडी box-shadow: ...; CSS declaration तुरंत जनरेट होता है
सरल soft shadows या जटिल लेयर्ड depth बनाने के लिए लेयर्स जोड़ें या हटाएं
अंदर की ओर धंसी shadows के लिए negative spread और offset वैल्यू सपोर्टेड हैं
पूरी तरह आपके ब्राउज़र में चलता है, कोई shadow या डिज़ाइन डेटा कहीं नहीं भेजा जाता

CSS Box Shadow Generator का उपयोग कैसे करें

पहली shadow लेयर की x, y, blur और spread एडजस्ट करें
एक color चुनें और अगर आप चाहते हैं कि shadow बॉक्स के अंदर दिखे तो Inset टॉगल करें
अतिरिक्त depth के लिए एक और shadow स्टैक करने के लिए Add layer पर क्लिक करें
कोड पैनल से जनरेट हुआ box-shadow CSS कॉपी करें

उदाहरण

इनपुट

x0 y4 blur8 rgba(0,0,0,.2)

आउटपुट

box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);

एक soft drop shadow, paste करने के लिए तैयार CSS declaration के रूप में रेंडर हुई।

सामान्य त्रुटियाँ और समस्या निवारण

box-shadow soft होने के बजाय बहुत हार्ड या बॉक्सी दिखता है। — offset के सापेक्ष blur वैल्यू बढ़ाएं — एक बड़ा blur और मामूली y-offset सॉफ्ट, ज़्यादा नैचुरल दिखने वाली shadow बनाता है।
प्रीव्यू बॉक्स पर एक inset लेयर दिखाई नहीं देती। — Inset shadows सिर्फ एलिमेंट के padding box के अंदर दिखती हैं, इसलिए सुनिश्चित करें कि लेयर की offset और blur इतनी बड़ी हो कि वह प्रीव्यू के बैकग्राउंड के सामने दिखाई दे।
कई लेयर्स होने पर stylesheet में shadow वैल्यू पढ़ना मुश्किल हो जाता है। — यह अपेक्षित है — box-shadow कॉमा-सेपरेटेड लेयर्स स्वीकार करता है, और CSS Box Shadow Generator डिज़ाइन के अनुसार हर लेयर को एक ही लाइन में रखता है; अगर आप एक लेयर प्रति लाइन चाहते हैं तो लिंटर से फॉर्मेट करें।
negative spread वैल्यू shadow को लगभग गायब कर देती लगती है। — negative spread blur लागू होने से पहले shadow के किनारों को अंदर की ओर खींचता है, इसलिए इसे बड़े blur के साथ मिलाएं ताकि shadow दिखती रहे — यह tight contact shadows में आम है।

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

CSS Box Shadow Generator क्या बनाता है?: यह आपके द्वारा कॉन्फ़िगर की गई एक या अधिक लेयर्स से बना एक पूरा box-shadow CSS declaration बनाता है, हर एक की अपनी offset, blur, spread, color और inset सेटिंग होती है, जो stylesheet में पेस्ट करने के लिए तैयार होता है।
क्या CSS Box Shadow Generator कई stacked shadows बना सकता है?: हां। जितनी shadow लेयर्स चाहिए उतनी स्टैक करने के लिए Add layer पर क्लिक करें — CSS का box-shadow कॉमा-सेपरेटेड लेयर्स को सपोर्ट करता है, और टूल उन्हें सही क्रम में जोड़ता है।
inset box-shadow क्या होता है?: एक inset box-shadow एलिमेंट के बॉक्स के पीछे के बजाय उसके अंदर रेंडर होता है, जो pressed-button इफेक्ट्स या सूक्ष्म inner borders के लिए उपयोगी है। किसी भी लेयर पर Inset टॉगल करके इसे बदलें।
क्या CSS Box Shadow Generator rgba और hex कलर्स सपोर्ट करता है?: हां। किसी भी वैध CSS color — hex, rgb(), या rgba() — को लेयर के color फील्ड में टाइप करें, या hex वैल्यू के लिए कलर पिकर इस्तेमाल करें; rgba से आप shadow की opacity को अलग से कंट्रोल कर सकते हैं।
क्या CSS Box Shadow Generator मेरी डिज़ाइन वैल्यू अपलोड करता है?: नहीं। सभी shadow लेयर्स और जनरेट हुआ CSS आपके ब्राउज़र में ही रहते हैं। आपके डिज़ाइन का कोई भी डेटा ArrayKit या किसी सर्वर पर अपलोड नहीं होता।
हार्ड एज के बजाय soft, realistic shadow कैसे पाएं?: offset के सापेक्ष बड़ी blur वैल्यू इस्तेमाल करें, और एक छोटी tight shadow को एक बड़ी soft shadow के साथ लेयर करने पर विचार करें — यह two-layer approach यह नकल करता है कि असली रोशनी में shadows कैसी दिखती हैं।