CSS बॉक्स शैडो जेनरेटर
CSS box-shadow को विज़ुअली बनाएं: कई लेयर जोड़ें, ऑफ़सेट, ब्लर, स्प्रेड, inset और RGBA ओपेसिटी सेट करें, लाइव प्रीव्यू देखें और साफ़ कोड कॉपी करें।
प्रीसेट
लेयर
प्रीव्यू सेटिंग्स
प्रीव्यू
box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.25);
संबंधित टूल्स
सभी देखेंCSS बॉक्स शैडो जेनरेटर क्या है?
यह CSS box-shadow प्रॉपर्टी के लिए एक विज़ुअल एडिटर है। आप कई शैडो लेयर जोड़ सकते हैं, हर लेयर का अपना ऑफ़सेट, ब्लर, स्प्रेड, रंग, ओपेसिटी और inset फ्लैग सेट कर सकते हैं, और टूल सैंपल बॉक्स पर नतीजा दिखाते हुए मिलता-जुलता CSS लिख देता है।
CSS बॉक्स शैडो जेनरेटर का उपयोग कैसे करें
- कोई प्रीसेट (Soft, Layered, Hard, Glow, Inner, Ring) चुनें या डिफ़ॉल्ट शैडो से शुरू करें।
- किसी लेयर को चुनें और Horizontal offset, Vertical offset, Blur, Spread, Shadow color और Opacity बदलें; इनर शैडो के लिए Inset टिक करें।
- मल्टी-लेयर शैडो बनाने के लिए Add layer / Remove layer का उपयोग करें; लेयर पेंट होने के क्रम में दिखती हैं।
- शैडो को संदर्भ में परखने के लिए Preview settings में बैकग्राउंड, एलिमेंट का रंग और रेडियस बदलें।
- जेनरेट हुआ CSS कोड कॉपी करें।
उदाहरण
One layer: x 10px, y -5px, blur 20px, spread 3px, color #3b82f6, opacity 1, Inset on
box-shadow: inset 10px -5px 20px 3px #3b82f6;
CSS बॉक्स शैडो जेनरेटर का उपयोग कब करें
इसे किसी भी HTML एलिमेंट के लिए कार्ड एलिवेशन, फ़ोकस रिंग, ग्लो या इनर शैडो डिज़ाइन करने में इस्तेमाल करें। टेक्स्ट की शैडो के लिए Text Shadow Generator और पारदर्शी PNG या क्लिप किए एलिमेंट के आकार का पालन करने वाली शैडो के लिए filter: drop-shadow() (CSS Filter Generator) चुनें, क्योंकि box-shadow हमेशा एलिमेंट के बॉर्डर बॉक्स का पालन करती है।
CSS बॉक्स शैडो जेनरेटर कैसे काम करता है
हर लेयर एक box-shadow वैल्यू बनती है, जिसका क्रम [inset] x y blur spread color है। लंबाई px में लिखी जाती है (शून्य बिना यूनिट के 0 लिखा जाता है)। ओपेसिटी स्लाइडर रंग के अपने alpha से गुणा होता है: पूरी तरह अपारदर्शी रंग hex में और पारदर्शी रंग rgba(r, g, b, a) में लिखे जाते हैं। कई लेयर कॉमा से जुड़ती हैं, हर एक अलग पंक्ति में; पहली लेयर सबसे ऊपर पेंट होती है। ब्लर ऋणात्मक नहीं हो सकता, स्प्रेड हो सकता है।
सामान्य उपयोग मामले
- कार्ड और मोडल के लिए मटीरियल-शैली की लेयर्ड एलिवेशन
- सिर्फ़ स्प्रेड वाली शैडो (0 0 0 3px) से एक्सेसिबल फ़ोकस रिंग
- दबे हुए बटन और इनपुट फ़ील्ड के लिए इनर शैडो
- कॉल-टू-एक्शन बटन के चारों ओर रंगीन ग्लो
- नियो-ब्रूटलिस्ट डिज़ाइन के लिए हार्ड ऑफ़सेट शैडो
अक्सर पूछे जाने वाले प्रश्न
कई शैडो किस क्रम में बनती हैं?
सूची की पहली शैडो सबसे ऊपर और आख़िरी सबसे नीचे पेंट होती है। टूल लेयर को उसी क्रम में लिखता है जिसमें वे Layers पैनल में दिखती हैं।
ब्लर और स्प्रेड में क्या अंतर है?
ब्लर शैडो के किनारे को मुलायम करता है (यह ऋणात्मक नहीं हो सकता)। स्प्रेड ब्लर से पहले शैडो को बड़ा या छोटा करता है; ऋणात्मक स्प्रेड शैडो को एलिमेंट से छोटा कर देता है।
क्या मुझे अब भी -webkit-box-shadow चाहिए?
नहीं। बिना प्रीफ़िक्स वाली box-shadow एक दशक से भी ज़्यादा समय से सभी ब्राउज़र में सपोर्टेड है, इसलिए टूल सिर्फ़ स्टैंडर्ड प्रॉपर्टी देता है।
मेरी पारदर्शी इमेज के चारों ओर शैडो क्यों नहीं दिखती?
box-shadow एलिमेंट के आयताकार बॉक्स (border-radius समेत) का पालन करती है, दिखने वाले पिक्सल का नहीं। इसके लिए filter: drop-shadow() इस्तेमाल करें।