Box Shadow Generator

इस्तेमाल करने का तरीका

1. किसी प्रीसेट से शुरुआत करें या पहली परत का ऑफ़सेट, ब्लर, स्प्रेड, रंग और opacity बदलें।
2. ज़्यादा स्वाभाविक गहराई के लिए और परतें जोड़ें, या अंदरूनी छाया के लिए “Inset” चुनें।
3. अपने डिज़ाइन के अनुसार प्रीव्यू का बैकग्राउंड और बॉक्स का रंग बदलें, फिर CSS कॉपी करें।

यह कैसे काम करता है

box-shadow की हर परत में ये मान होते हैं: क्षैतिज ऑफ़सेट, ऊर्ध्वाधर ऑफ़सेट, ब्लर रेडियस, स्प्रेड रेडियस और रंग; इनके पहले वैकल्पिक रूप से inset भी दिया जा सकता है। धनात्मक ऑफ़सेट से छाया दाईं ओर और नीचे जाती है। ब्लर किनारों को मुलायम करता है और ऋणात्मक नहीं हो सकता; स्प्रेड ब्लर से पहले छाया को बड़ा (धनात्मक) या छोटा (ऋणात्मक) करता है। कई परतों को कॉमा से अलग किया जाता है और पहली परत सबसे ऊपर दिखाई जाती है।

वास्तविक ऊँचाई का प्रभाव देने के लिए आम तौर पर कम opacity वाली छोटी, स्पष्ट छाया को बड़ी, मुलायम छाया के साथ जोड़ा जाता है—“Elevated” प्रीसेट यही करता है। रंग rgba() में लिखे जाते हैं, ताकि opacity स्पष्ट हो। छायाएँ एलिमेंट के border-radius के अनुसार बनती हैं और लेआउट में जगह नहीं लेतीं, इसलिए वे अन्य एलिमेंट को कभी नहीं खिसकातीं।

कई एलिमेंट पर बहुत बड़े blur मानों वाली छायाएँ देने से कम क्षमता वाले फ़ोन पर स्क्रॉल धीमा हो सकता है। अगर आप छाया को ऐनिमेट करते हैं, तो आम तौर पर box-shadow को ऐनिमेट करने के बजाय ऐसी pseudo-element को फ़ेड इन करना ज़्यादा सहज रहता है जिस पर छाया पहले से लगी हो।

उदाहरण

अक्सर पूछे जाने वाले सवाल

गोपनीयता

CSS आपके ब्राउज़र में जनरेट होता है। कुछ भी अपलोड या स्टोर नहीं किया जाता।