CSS बॉक्स शैडो (box-shadow) जनरेटर
स्लाइडर हिलाकर और कार्ड पर नतीजा देखकर box-shadow बनाएँ। ज़्यादा नरम और असली जैसी छायाओं के लिए छह लेयर तक जोड़ें, दबे हुए असर के लिए inset इस्तेमाल करें, और सॉफ़्ट, फ़्लोटिंग, ग्लो या न्यूमॉर्फ़िज़्म जैसे प्रीसेट से शुरू करें। एक क्लिक में CSS कॉपी करें।
इसका उपयोग कैसे करें
- प्रीसेट चुनें या शैडो का ऑफ़सेट, ब्लर, स्प्रेड, रंग और अपारदर्शिता एडजस्ट करें।
- + से लेयर जोड़ें और हर एक को चुनकर एडिट करें; अपने डिज़ाइन से मिलाने के लिए बैकग्राउंड, बॉक्स का रंग और कोनों की त्रिज्या बदलें।
- CSS कॉपी करें और एलिमेंट के रूल में पेस्ट करें।
अक्सर पूछे जाने वाले प्रश्न
ब्लर और स्प्रेड क्या करते हैं?
ब्लर शैडो के किनारे को नरम करता है; शून्य पर किनारा तीखा रहता है। स्प्रेड ब्लर से पहले शैडो को हर दिशा में बड़ा करता है, और ऋणात्मक स्प्रेड उसे छोटा करता है, जिससे बड़ा धुंधला शैडो एलिमेंट के नीचे रहता है।
शैडो की कई लेयर क्यों इस्तेमाल करें?
असली छायाएँ वस्तु के पास गहरी होती हैं और दूर जाकर फीकी पड़ती हैं। छोटे तीखे शैडो को बड़े नरम शैडो के साथ मिलाना इसकी नक़ल करता है और एक शैडो से ज़्यादा स्वाभाविक दिखता है। सूची की पहली लेयर सबसे ऊपर बनती है।
क्या box-shadow पेज को धीमा करता है?
सामान्य इस्तेमाल में नहीं। बहुत सारे एलिमेंट पर बहुत बड़ा ब्लर, या खुद शैडो को एनिमेट करना, धीमे फ़ोन पर परफ़ॉर्मेंस घटा सकता है; एनिमेट करने के लिए इसके बजाय शैडो वाले pseudo-element की अपारदर्शिता बदलें।
🏷️ मेटा टैग जनरेटर
🖼️ ओपन ग्राफ (Open Graph) जनरेटर
🔗 UTM लिंक बिल्डर
🌈 CSS ग्रेडिएंट जनरेटर