0

CSS Box Shadow जनरेटर

CSS box-shadow कोड को विज़ुअली बनाएँ: ऑफ़सेट, ब्लर, स्प्रेड, अपारदर्शिता के साथ रंग, इनसेट मोड और लाइव प्रीव्यू के साथ चार लेयर तक के लिए स्लाइडर।

🔒 पूरी तरह से आपके ब्राउज़र में संसाधित - आपके द्वारा यहां दर्ज की गई कोई भी चीज़ कभी भी अपलोड नहीं की जाती है।

0px
4px
12px
0px
0.25
प्रोसेस हो रहा है... 0%

परिणाम

एक box-shadow डिक्लेरेशन में छह चल भाग होते हैं — X और Y ऑफ़सेट, ब्लर, स्प्रेड, रंग और वैकल्पिक इनसेट कीवर्ड — और उन्हें सही करने का एकमात्र तरीका है उन्हें देखना। यह जनरेटर हर भाग को एक स्लाइडर पर रखता है और जैसे-जैसे आप खींचते हैं, परिणाम एक प्रीव्यू कार्ड पर दिखाता है, ताकि नीचे की CSS लाइन हमेशा वही हो जो आप देख रहे हैं।

असली दुनिया के शैडो शायद ही कभी सिंगल लेयर होते हैं। लेयर लिस्ट आपको एक ही डिक्लेरेशन में चार शैडो तक स्टैक करने देती है: एज डेफ़िनिशन के लिए एक टाइट डार्क लाइन और एलिवेशन के लिए चौड़ी सॉफ़्ट वॉश, या वह लाइट-एंड-डार्क जोड़ी जो न्यूमॉर्फ़िज़्म को परिभाषित करती है। एडिट करने के लिए एक लेयर चुनें, जिनकी ज़रूरत न हो उन्हें हटाएँ, और कंबाइंड box-shadow वैल्यू लाइव अपडेट होती है।

डार्क इंटरफ़ेस पर शैडो बहुत अलग तरीके से पढ़े जाते हैं, जहाँ लगभग-काले पेज पर काला शैडो बस गायब हो जाता है। प्रीव्यू बैकग्राउंड टॉगल बैकड्रॉप को लाइट और डार्क के बीच बदलता है ताकि आप शिप करने से पहले दोनों थीम जाँच सकें। प्रीसेट पेज उन वेरिएंट को कवर करते हैं जिन्हें लोग असल में खोजते हैं: एक सॉफ़्ट एलिवेशन शैडो, एक इनसेट वेल, टू-लेयर न्यूमॉर्फ़िज़्म रेसिपी और एक सूक्ष्म कार्ड शैडो।

इस साइट के हर टूल की तरह, जनरेटर मुफ़्त है और पूरी तरह आपके ब्राउज़र में चलता है: कोई अपलोड नहीं, कोई अकाउंट नहीं, और पेज लोड होने के बाद यह ऑफ़लाइन भी काम करता रहता है।