Box shadow को लेयर दर लेयर बनाएँ
यह box shadow generator आपके लिए CSS <code>box-shadow</code> प्रॉपर्टी लिखता है। जितनी चाहिए उतनी शैडो लेयर जोड़ें, हर एक का horizontal और vertical offset, blur, spread, रंग और opacity सेट करें, उसे inset शैडो में बदलें, और किसी भी बैकग्राउंड पर प्रीव्यू बॉक्स को अपडेट होते देखें। सॉफ़्ट शैडो, Material-स्टाइल elevation, neumorphism, हार्ड offset और glow के प्रीसेट से शुरू करें, फिर CSS या Tailwind <code>shadow-[…]</code> क्लास कॉपी करें। किसी मौजूदा शैडो को एडिट करने के लिए उसे पेस्ट करें। सब कुछ आपके ब्राउज़र में चलता है।
CSS box shadow कैसे बनाएँ
- 1जो चाहिए उसके करीब का कोई प्रीसेट चुनें, या डिफ़ॉल्ट लेयर वाली शैडो रखें।
- 2कोई लेयर चुनें और उसका X और Y offset, blur, spread, रंग और opacity सेट करें। बॉक्स के अंदर शैडो बनाने के लिए Inset चालू करें।
- 3कई शैडो जोड़ने के लिए लेयर जोड़ें, डुप्लिकेट, क्रम बदलें और लेयर छिपाएँ इस्तेमाल करें।
- 4अपने डिज़ाइन से मिलाने के लिए प्रीव्यू का बैकग्राउंड, बॉक्स का रंग, कॉर्नर रेडियस और साइज़ बदलें।
- 5CSS या Tailwind क्लास कॉपी करें।
box-shadow वैल्यू का मतलब
- Offset X और Y
- शैडो को दाईं ओर और नीचे कितना खिसकाया गया है। नेगेटिव वैल्यू उसे बाईं ओर और ऊपर ले जाती हैं। पेज के ऊपर रोशनी का स्रोत हो तो Y offset पॉज़िटिव होता है।
- Blur radius
- किनारा कितना नरम है। 0 बॉक्स की एकदम साफ़ कॉपी देता है; बड़ी वैल्यू शैडो को ज़्यादा चौड़े और हल्के हिस्से में फैलाती हैं। यह नेगेटिव नहीं हो सकता।
- Spread radius
- Blur से पहले शैडो को बड़ा या छोटा करता है। बड़े blur के साथ नेगेटिव spread नरम शैडो को किनारों से झाँकने नहीं देता — ज़्यादातर "सॉफ़्ट" शैडो के पीछे यही तरकीब है।
- रंग
- आमतौर पर कम opacity पर काला या बैकग्राउंड का गहरा शेड। बैकग्राउंड के रंग वाली शैडो शुद्ध ग्रे से ज़्यादा प्राकृतिक लगती है।
- inset
- शैडो को बॉर्डर के बाहर के बजाय अंदर बनाता है, जिससे बॉक्स दबा हुआ लगता है। Inset और बाहरी शैडो एक ही declaration में मिलाई जा सकती हैं।
कई शैडो की लेयर क्यों?
असली शैडो में एक गहरा, सघन हिस्सा होता है जहाँ चीज़ सतह को लगभग छूती है, और उससे आगे एक नरम, चौड़ी उपछाया। एक box-shadow लेयर इनमें से सिर्फ़ एक ही बना सकती है। हर बार दोगुने offset और blur वाली दो से पाँच लेयर, सभी कम opacity पर, एक के ऊपर एक रखने से वह स्मूद और असली जैसी गहराई मिलती है जो आधुनिक डिज़ाइन सिस्टम इस्तेमाल करते हैं। स्मूद लेयर्ड प्रीसेट ठीक यही है।
लेयर आगे से पीछे की ओर बनती हैं: लिस्ट की पहली लेयर सबसे ऊपर होती है। ऐरो बटन से उनका क्रम बदलें और आँख वाले आइकन से कोई लेयर छिपाकर देखें कि उसका क्या योगदान है। छिपी हुई लेयर कॉपी किए गए CSS में शामिल नहीं होतीं।
Elevation, neumorphism और दूसरी स्टाइल
Elevation 1–5 प्रीसेट Material Design की क्लासिक कार्ड शैडो पर आधारित हैं: हर लेवल एक ambient शैडो को एक key शैडो के साथ जोड़ता है, जिससे कार्ड पेज से और ऊपर उठता है।
Neumorphism अपने बैकग्राउंड जैसे ही रंग वाले बॉक्स पर दो शैडो इस्तेमाल करता है: एक गहरी शैडो नीचे-दाएँ खिसकी हुई और एक हल्की ऊपर-बाएँ। यह तभी काम करता है जब बॉक्स और बैकग्राउंड का रंग एक हो, इसलिए प्रीसेट दोनों सेट करता है। हार्ड offset blur पूरी तरह हटाकर फ़्लैट, brutalist लुक देता है, और Glow ज़ीरो offset और रंगीन शैडो से फ़ोकस रिंग और डार्क बैकग्राउंड पर नियॉन इफ़ेक्ट बनाता है।
Tailwind CSS में box shadow
Tailwind की बिल्ट-इन shadow-sm से shadow-2xl तक की क्लास आम ज़रूरतें पूरी करती हैं। बाकी सबके लिए generator shadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)] जैसी arbitrary वैल्यू लिखता है: स्पेस अंडरस्कोर बन जाते हैं क्योंकि क्लास नाम में स्पेस नहीं हो सकते, और यह क्लास कॉन्फ़िग बदले बिना Tailwind 3 और 4 में काम करती है।
शैडो को CSS gradient generator के बैकग्राउंड के साथ मिलाएँ, या contrast checker से जाँचें कि आपके कार्ड का टेक्स्ट पढ़ने लायक रहे।
शैडो और परफ़ॉर्मेंस
सभी मौजूदा ब्राउज़र में बड़े blur radius GPU बनाता है और स्थिर एलिमेंट पर इनका खर्च कम है। लेकिन box-shadow को एनिमेट करने पर एलिमेंट हर फ़्रेम में दोबारा पेंट होता है; hover पर गहराई एनिमेट करनी हो तो बड़ी शैडो को किसी pseudo-element पर रखें और उसकी opacity एनिमेट करें।
अक्सर पूछे जाने वाले सवाल
- box-shadow का सिंटैक्स क्या है?
- box-shadow: [inset] offset-x offset-y [blur] [spread] color;. सिर्फ़ दोनों offset ज़रूरी हैं। कई शैडो को कॉमा से अलग करें, जैसे box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);.
- नरम, हल्की शैडो कैसे बनाएँ?
- कम opacity (10–20%) वाला काला, बड़ा blur, छोटा Y offset और नेगेटिव spread इस्तेमाल करें, जैसे 0 10px 30px -5px rgba(0,0,0,0.15)। ऐसी दो-तीन शैडो की लेयर और भी स्मूद लगती है।
- सिर्फ़ एक तरफ़ शैडो कैसे लगाएँ?
- शैडो को उसी तरफ़ खिसकाएँ और लगभग blur जितना नेगेटिव spread दें ताकि वह बाकी किनारों पर न दिखे, जैसे सिर्फ़ नीचे की शैडो के लिए 0 8px 6px -6px rgba(0,0,0,0.3)।
- inset क्या करता है?
- inset शैडो को बॉक्स के पीछे के बजाय उसके अंदर बनाता है, जिससे एलिमेंट पेज में दबा हुआ लगता है। यह इनपुट फ़ील्ड और दबे हुए बटन में आम है।
- box-shadow और drop-shadow में क्या अंतर है?
- box-shadow एलिमेंट के बॉक्स और border radius के हिसाब से चलती है। filter: drop-shadow() फ़ंक्शन असल में दिखने वाले पिक्सल के हिसाब से चलता है, जैसे पारदर्शी PNG या SVG आइकन की आउटलाइन, लेकिन इसमें spread और inset नहीं होते।
- Tailwind में कस्टम box shadow कैसे इस्तेमाल करें?
- Generator से Tailwind क्लास कॉपी करें, जैसे arbitrary वैल्यू shadow-[0_4px_12px_rgba(0,0,0,0.15)], और उसे एलिमेंट में जोड़ें। आप CSS वैल्यू को अपनी थीम की boxShadow सेटिंग में रखकर उसे एक नाम भी दे सकते हैं।
- क्या मैं पहले से मौजूद शैडो एडिट कर सकता हूँ?
- हाँ। Import में box-shadow वैल्यू, पूरा declaration या Tailwind shadow-[…] क्लास पेस्ट करें। rem और em लंबाइयाँ 16px के हिसाब से बदली जाती हैं।
- क्या मेरा CSS कहीं भेजा जाता है?
- नहीं। Generator पूरी तरह आपके ब्राउज़र में चलता है।