CSS बॉक्स शैडो जनरेटर
offset, blur, spread, color, opacity और inset के लाइव स्लाइडर्स के साथ layered CSS box-shadows बनाएं: एक असली एलिमेंट पर प्रीव्यू करें और तुरंत कॉपी करने योग्य CSS पाएं।
box-shadow: -;
सब कुछ आपके browser में live update होता है: कोई upload नहीं, कोई sign-up नहीं, बिल्कुल मुफ़्त।
CSS बॉक्स शैडो जनरेटर के बारे में
CSS Box Shadow Generator आपको कोड में मान अनुमान लगाने के बजाय दृश्य रूप से box-shadow डिज़ाइन करने देता है। क्षैतिज व लंबवत ऑफ़सेट, ब्लर रेडियस, स्प्रेड रेडियस, रंग और ओपैसिटी के लिए स्लाइडर खींचें, इनसेट टॉगल के साथ, और एक असली एलिमेंट को लाइव अपडेट होते देखें। जब यह सही लगे, तो तैयार-टू-पेस्ट CSS को एक क्लिक में कॉपी करें।
आधुनिक UI शैडो शायद ही कभी एक ही लेयर की होती हैं। यह जेनरेटर स्टैक्ड शैडो लेयर्स को सपोर्ट करता है: लेयर जोड़ें, डुप्लिकेट करें, छुपाएँ या हटाएँ, और चुनी हुई लेयर अकेले या सभी लेयर एक साथ प्रीव्यू करें। एक मुलायम चौड़ी शैडो के नीचे एक कसी हुई गहरी शैडो लेयर करना ही पॉलिश किए गए कार्ड और बटनों को गहराई देता है।
आप प्रीव्यू एलिमेंट को भी स्टाइल कर सकते हैं (बॉक्स रंग, बॉर्डर रेडियस और कैनवस बैकग्राउंड) ताकि शैडो को एक वास्तविक संदर्भ में परखा जा सके, जिसमें डार्क सतहें भी शामिल हैं। किसी प्रीसेट से शुरू करें, प्रेरणा के लिए “Randomize layer” दबाएँ, और जब चाहें साफ़ शुरुआत के लिए रीसेट करें। सब कुछ आपके ब्राउज़र में चलता है।
CSS बॉक्स शैडो जनरेटर का उपयोग कैसे करें
- क्षैतिज ऑफ़सेट, लंबवत ऑफ़सेट, ब्लर, स्प्रेड, रंग और ओपैसिटी के स्लाइडर समायोजित करें, और अगर इनर शैडो चाहिए तो “Inset shadow” टॉगल करें।
- शैडो को स्टैक करने के लिए “Add layer” या “Duplicate layer” पर क्लिक करें, और हर लेयर को बारीकी से सेट करने के लिए प्रीव्यू मोड को “This layer” और “All layers” के बीच बदलें।
- एलिमेंट और कैनवस को ट्यून करें (बॉक्स रंग, बॉर्डर रेडियस और बैकग्राउंड) ताकि प्रीव्यू आपके असली डिज़ाइन से मेल खाए।
- अगर आप खाली स्लाइडर सेट के बजाय एक शुरुआती बिंदु चाहते हैं तो कोई प्रीसेट लागू करें या “Randomize layer” का इस्तेमाल करें।
- पूरा CSS नियम (या सिर्फ़ मान) कॉपी करें और उसे अपनी स्टाइलशीट में पेस्ट करें।