बॉक्स शैडो जनरेटर
बॉक्स शैडो जनरेटर एक मुफ्त, दृश्यात्मक CSS उपकरण है जो आपको मैन्युअली कोड लिखे बिना अपने वेब तत्वों के लिए सुंदर बॉक्स शैडो बनाने में मदद करता है। चाहे आपको किसी कार्ड घटक के लिए सूक्ष्म ड्रॉप शैडो, CTA बटन के लिए तीव्र चमक प्रभाव, या एक नाटकीय 3D प्रभाव के लिए कई परतों वाले शैडो की आवश्यकता हो, यह जनरेटर आपको प्रत्येक शैडो पैरामीटर पर पूर्ण नियंत्रण प्रदान करता है। आप सहज स्लाइडर और रंग चयनकर्ताओं के माध्यम से क्षैतिज एवं ऊर्ध्वाधर ऑफसेट, ब्लर रेडियस, स्प्रेड रेडियस, रंग और ऑपैक्यूइटी को समायोजित कर सकते हैं।इनसेट और आउटसेट शैडोज़ के बीच स्विच करें। कई शैडो लेयर जोड़ें और एक लाइव प्रीव्यू तत्व पर रियल-टाइम में परिणाम देखें। यह टूल स्पष्ट, सभी ब्राउज़रों के लिए उपयुक्त CSS कोड उत्पन्न करता है, जिसे आप अपनी स्टाइलशीट में कॉपी और पेस्ट कर सकते हैं।
क्या है
CSS की `box-shadow` विशेषता किसी तत्व के फ्रेम के चारों ओर छाया प्रभाव जोड़ती है। बॉक्स शैडो को तत्व के सापेक्ष X एवं Y ऑफसेट, धुंधलापन एवं प्रसार त्रिज्या, रंग, तथा यह निर्धारित करके वर्णित किया जा सकता है कि छाया तत्व के अंदर या बाहर प्रदर्शित होती है। बॉक्स-शैडो सिंटैक्स: बॉक्स-शैडो: ऑफसेट-एक्स, ऑफसेट-वाई, ब्लर-रेडियस, स्प्रेड-रेडियस, रंग, इनसेट; प्रत्येक पैरामीटर को समझना: - offset-x: तत्व से छाया की क्षैतिज दूरी। धनात्मक मान दाईं ओर और ऋणात्मक मान बाईं ओर स्थानांतरित होते हैं। - offset-y: ऊर्ध्वाधर दूरी। सकारात्मक मान नीचे की ओर और ऋणात्मक मान ऊपर की ओर गति करते हैं। - ब्लर-रेडियस: छाया के किनारे कितने धुंधले होते हैं। 0 का अर्थ है तीखा किनारा; उच्च मान नरम छायाएँ पैदा करते हैं। यह ऋणात्मक नहीं हो सकता। - स्प्रेड-रेडियस: छाया के आकार को बढ़ाता या घटाता है। धनात्मक मान छाया को तत्व से बड़ा करते हैं, ऋणात्मक मान उसे छोटा करते हैं। - रंग: कोई भी CSS रंग मान (हेक्स, RGB, RGBA, HSL, नामित रंग)। RGBA का उपयोग अल्फा पारदर्शिता के साथ करने पर यथार्थवादी छायाएँ पैदा होती हैं। - इनसेट (वैकल्पिक): यदि उपलब्ध हो, तो छाया तत्व के बाहर के बजाय उसके अंदर खींची जाती है। वेब डिज़ाइन में बॉक्स-शैडो का उपयोग क्यों करें: - गहराई एवं ऊँचाई: छायाएँ तत्वों को सतह से ऊपर तैरते हुए प्रस्तुत करके दृश्य संरचना में पदानुक्रम स्थापित करती हैं। – मैटेरियल डिज़ाइन अनुपालन: गूगल की मैटेरियल डिज़ाइन प्रणाली घटकों की पदानुक्रमिकता को दर्शाने हेतु छाया की गहराई का उपयोग करती है। – फोकस एवं होवर स्थितियाँ: छायाएँ इंटरैक्टिव तत्वों पर दृश्य प्रतिक्रिया प्रदान करती हैं। – सौंदर्यपूर्ण पॉलिश: यहाँ तक कि सूक्ष्म छायाएँ भी इंटरफ़ेस को अधिक परिष्कृत और पेशेवर दिखाती हैं। - कार्डों का भेदभाव: छायाएँ कार्ड-आधारित लेआउट में कार्डों को पृष्ठभूमि से अलग करने में मदद करती हैं। यह जनरेटर कई शैडो परतों (कॉमा-विभाजित) का समर्थन करता है, जिससे आप एक ही तत्व पर कई शैडो प्रभावों को एक साथ लगाकर अधिक यथार्थवादी या नाटकीय परिणाम प्राप्त कर सकते हैं।
कैसे उपयोग करें
- चेकबॉक्स का उपयोग करके व्यक्तिगत शैडो परतों को सक्षम या निष्क्रिय करें। एक शैडो परत से शुरुआत करें और 'Add Shadow' बटन पर क्लिक करके आवश्यकतानुसार अधिक परतें जोड़ें। प्रत्येक परत को स्वतंत्र रूप से कॉन्फ़िगर किया जा सकता है।
- स्लाइडर का उपयोग करके क्षैतिज ऑफसेट (ऑफसेट-x) को समायोजित करें। सकारात्मक मान छाया को तत्व के दाईं ओर और ऋणात्मक मान बाईं ओर स्थानांतरित करते हैं। ड्रैग करते समय प्रीव्यू के अद्यतन को वास्तविक समय में देखें।
- शैडो किस हद तक तत्व के ऊपर या नीचे प्रकट होता है, इसे नियंत्रित करने के लिए ऊर्ध्वाधर ऑफसेट (ऑफसेट-y) सेट करें। धनात्मक मान शैडो को नीचे की ओर स्थानांतरित करते हैं, जिससे ऊपर से आने वाले प्रकाश स्रोत का अनुकरण होता है।
- नरम एवं अधिक फैले हुए छायाओं के लिए धुंधलापन त्रिज्या बढ़ाएँ। मान 0 पर छाया स्पष्ट किनारों वाली होती है; 5–20 पिक्सेल के मान अधिकांश यूआई तत्वों के लिए प्राकृतिक दिखने वाली छायाएँ उत्पन्न करते हैं। बहुत उच्च मान (30 पिक्सेल या उससे अधिक) चमकदार प्रभाव उत्पन्न करते हैं।
- छाया को बढ़ाने या घटाने के लिए स्प्रेड रेडियस को सूक्ष्म रूप से समायोजित करें। ऋणात्मक मान तत्व के आसपास की छाया को सघन करते हैं, जो स्पष्ट किनारा प्रभाव बनाने के लिए उपयोगी हैं। धनात्मक मान छाया को तत्व से बड़ा बना देते हैं।
- रंग चयनक का उपयोग करके अपना छाया रंग चुनें। पारदर्शिता समायोजित करने के लिए ऑपैक्यूइटी स्लाइडर को सक्षम करें — वास्तविक छायाओं में आमतौर पर rgba (0, 0, 0, 0.1–0.3) का उपयोग किया जाता है। रचनात्मक चमक प्रभावों के लिए विभिन्न रंगों का प्रयोग करें (उदाहरण के लिए, नियॉन बटनों के लिए नीली चमक)।
- 'इनसेट' चेकबॉक्स को ट्रांसफर करके बाहरी एवं अंतर्निहित छायाओं के बीच स्विच करें। इनसेट छायाएँ तत्व के भीतर खींची जाती हैं, जिससे दबे हुए या अंदर झुके हुए प्रभाव पैदा होता है, जो फॉर्म इनपुट्स और दबे हुए बटनों के लिए उपयोगी होता है।
- उत्पन्न CSS कोड को आउटपुट पैनल से एक ही क्लिक में कॉपी करें। यह कोड क्रॉस-ब्राउज़र संगतता के लिए सभी वेंडर प्रीफिक्स शामिल करता है। इसे सीधे अपनी स्टाइलशीट या इनलाइन स्टाइल एट्रिब्यूट में पेस्ट करें।
उदाहरण
इनपुट: X:0 Y:4px Blur:12px Spread:0 Color:rgba(0,0,0,0.15)
प्रक्रिया: Combine offset + blur + color → CSS box-shadow syntax
परिणाम: box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15);
इनपुट: X:2px Y:2px Blur:8px Spread:-2px Color:#3b82f6
प्रक्रिया: Multi-shadow layering → Offset calculation
परिणाम: box-shadow: 2px 2px 8px -2px #3b82f6;
संबंधित खोजें
लोग यह भी खोजते हैं: बॉक्स बॉक्स जनरेटर, कॉर्पस बॉक्स शैडो, शैडो गेनर, क्रोश स्कॉट शेड।
बॉक्स बॉक्स जनरेटरकॉर्पस बॉक्स शैडोशैडो गेनरक्रोश स्कॉट शेड
अक्सर पूछे जाने वाले प्रश्न
बॉक्स-शैडो और टेक्स्ट-शैडो में क्या अंतर है?
बॉक्स-शैडो ब्लॉक-स्तरीय तत्वों (divs, sections, cards, buttons) पर लागू होता है और तत्व के आयताकार बॉक्स के चारों ओर छाया बनाता है। टेक्स्ट-शैडो तत्व के भीतर की पाठ सामग्री पर लागू होता है और अक्षरों के आकारों के पीछे छाया बनाता है। दोनों में समान सिंटैक्स (offset-x, offset-y, blur, color) होता है, लेकिन box-shadow में spread-radius और inset जैसी अतिरिक्त सुविधाएँ भी होती हैं।
क्या मैं एक ही तत्व पर कई छायाएँ बना सकता हूँ?
हाँ! कई बॉक्स शैडो को कॉमा से अलग किए गए शैडो मानों द्वारा परिभाषित किया जाता है। यह टूल असीमित शैडो परतों का समर्थन करता है। कई शैडो अधिक यथार्थवादी प्रभाव प्रदान करते हैं — उदाहरण के लिए, तत्काल गहराई के लिए एक सघन गहरा शैडो और परिवेशीय छाया के लिए एक नरम, बड़ा शैडो को संयोजित करना। क्रम महत्वपूर्ण है: सूची में पहला शैडो ऊपर दिखाई देता है, और बाद के शैडो उसके पीछे स्तरबद्ध होते हैं।
वास्तविक छायाओं के लिए मुझे कौन सा रंग इस्तेमाल करना चाहिए?
सबसे वास्तविक परिणामों के लिए, अपने पृष्ठभूमि रंग का गहरा संस्करण कम ऑपैक्युइटी के साथ उपयोग करें। हल्की पृष्ठभूमियों पर 15–25% ऑपैक्युइटी (rgba(0,0,0,0.15–0.25)) पर शुद्ध काला रंग अच्छा काम करता है। रंगीन पृष्ठभूमियों पर, पृष्ठभूमि रंग का और गहरा शेड इस्तेमाल करें। पूरी तरह अपारदर्शी छायाओं से बचें — वे अप्राकृतिक दिखती हैं। रंगीन चमक प्रभावों के लिए, 30–60% ऑपैक्युइटी पर चमकीले रंगों का उपयोग करें।
क्या सभी ब्राउज़रों में बॉक्स-शैडो का समर्थन है?
हाँ, बॉक्स-शैडो को ब्राउज़र में उत्कृष्ट समर्थन प्राप्त है। यह क्रोम, फ़ायरफॉक्स, सफारी, एज और ओपेरा सहित सभी आधुनिक ब्राउज़रों में विक्रेता प्रीफ़िक्स के बिना काम करता है। बहुत पुराने ब्राउज़रों (IE 8 और उससे नीचे) में बॉक्स-शैडो का समर्थन नहीं है, लेकिन आज इन ब्राउज़रों की बाज़ार हिस्सेदारी नगण्य है। अधिकतम संगतता के लिए उत्पन्न CSS में -webkit- प्रीफ़िक्स शामिल होता है।
मैं मटेरियल डिज़ाइन-शैली की छाया कैसे बना सकता हूँ?
मैटेरियल डिज़ाइन विभिन्न ऊंचाई स्तरों के लिए विशिष्ट छाया मानों का उपयोग करता है। सामान्य मान: स्तर 1: 0 1px 3pxrgba (0,0,0,0.12), 0 1px 2pxrgba (0,0,0,0.24); स्तर 2: 0 3px 6pxrgba (0,0,0,0.16), 0 3px 6pxrgba (0,0,0,0.23); स्तर 3: 0 10px 20pxrgba (0,0,0,0.19), 0 6px 6pxrgba (0,0,0,0.23)। प्रत्येक स्तर पर दो छायाओं को लेयर करना (एक अधिक सघन और एक फैली हुई) मैटेरियल डिज़ाइन के विशिष्ट गहराई प्रभाव को उत्पन्न करता है।