Box Shadow जनरेटर
Box Shadow जनरेटर आपको मल्टी-लेयर सपोर्ट, 12 बिल्ट-इन प्रीसेट (Neumorphism, Neon, Sharp, Layered सहित), हर लेयर के लिए offset, blur, spread, color, opacity, और inset कंट्रोल, लाइट/डार्क बैकग्राउंड टॉगल के साथ रियल-टाइम प्रीव्यू, और स्टैंडर्ड CSS तथा Tailwind CSS दोनों कोड जनरेट करने की सुविधा देता है। साइनअप ज़रूरी नहीं।
लेयर सेटिंग्स #1
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
shadow-md
कोई सुझाव है?
नया टूल अनुरोध करें या सुधार सुझाएं — हमारे Slack समुदाय में शामिल हों!
Box Shadow जनरेटर क्या है?
Box Shadow जनरेटर एक विज़ुअल टूल है जो आपको मैन्युअली कोड लिखे बिना CSS box-shadow इफ़ेक्ट बनाने में मदद करता है। box-shadow प्रॉपर्टी किसी एलिमेंट के फ्रेम के चारों ओर शैडो इफ़ेक्ट जोड़ती है, जिससे वेब डिज़ाइन में गहराई और आयाम बनते हैं। यह टूल Neumorphism, Neon glow, और Sharp borders जैसी लोकप्रिय शैलियों सहित 12 बिल्ट-इन प्रीसेट के साथ मल्टी-लेयर शैडो एडिटिंग प्रदान करता है। आप प्रत्येक लेयर के लिए offset, blur radius, spread radius, color, और opacity को स्वतंत्र रूप से एडजस्ट कर सकते हैं, रियल-टाइम प्रीव्यू और तुरंत CSS/Tailwind कोड जनरेशन के साथ।
Box Shadow जनरेटर का उपयोग कैसे करें
- शुरू करने के लिए कोई प्रीसेट चुनें या डिफ़ॉल्ट शैडो लेयर से शुरू करें
- स्लाइडर्स का उपयोग करके शैडो प्रॉपर्टीज़ एडजस्ट करें: Offset X/Y, Blur, Spread, और Opacity
- कलर पिकर से शैडो रंग चुनें और ज़रूरत हो तो Inset टॉगल करें
- जटिल इफ़ेक्ट के लिए लेयर जोड़ें बटन से कई शैडो लेयर्स जोड़ें
- अपने शैडो की दिखावट जांचने के लिए लाइट और डार्क बैकग्राउंड के बीच टॉगल करें
- अपने प्रोजेक्ट में उपयोग के लिए जनरेट किया गया CSS या Tailwind CSS कोड कॉपी करें
अक्सर पूछे जाने वाले प्रश्न
CSS box-shadow क्या है?
CSS box-shadow किसी एलिमेंट के चारों ओर शैडो इफ़ेक्ट जोड़ता है। यह horizontal offset, vertical offset, blur radius, spread radius, color, और एक वैकल्पिक inset कीवर्ड के लिए मान स्वीकार करता है। जटिल इफ़ेक्ट के लिए कई शैडो को कॉमा से जोड़ा जा सकता है।
Neumorphism इफ़ेक्ट कैसे बनाएँ?
Neumorphism (soft UI) दो शैडो का उपयोग करता है: एक डार्क शैडो एक दिशा में और एक लाइट शैडो विपरीत दिशा में, जिससे उभरा हुआ या दबा हुआ इफ़ेक्ट बनता है। शुरुआत के लिए Neumorphism प्रीसेट का उपयोग करें और अपने बैकग्राउंड से मिलान करने के लिए रंग कस्टमाइज़ करें।
क्या मैं कई शैडो लेयर्स का उपयोग कर सकता हूँ?
हाँ। यह टूल असीमित शैडो लेयर्स को सपोर्ट करता है जिन्हें आप जोड़, हटा और पुनर्व्यवस्थित कर सकते हैं। प्रत्येक लेयर में offset, blur, spread, color, opacity, और inset के लिए स्वतंत्र कंट्रोल हैं। कई लेयर्स अधिक समृद्ध और यथार्थवादी शैडो इफ़ेक्ट बनाती हैं।
क्या यह Tailwind CSS क्लासेज़ जनरेट करता है?
हाँ। टूल स्टैंडर्ड CSS box-shadow कोड और Tailwind CSS क्लासेज़ दोनों जनरेट करता है। Tailwind प्रीसेट से मैच करने वाले सरल शैडो के लिए, यह shadow-md जैसी क्लासेज़ आउटपुट करता है। कस्टम शैडो के लिए, यह shadow-[...] जैसा arbitrary value सिंटैक्स जनरेट करता है।
क्या मेरा डेटा सुरक्षित है?
हाँ। सभी शैडो जनरेशन 100% आपके ब्राउज़र में होती है। कोई डेटा किसी सर्वर पर नहीं भेजा जाता। आप अपने ब्राउज़र DevTools के Network टैब में इसकी पुष्टि कर सकते हैं।