यह टूल क्या करता है
बॉक्स शैडो जनरेटर से आप आँखों से देखकर CSS शैडो डिज़ाइन कर सकते हैं और तैयार box-shadow डिक्लेरेशन कॉपी कर सकते हैं। जितनी चाहें लेयर जोड़ें, हर लेयर का ऑफ़सेट, ब्लर, स्प्रेड, रंग और अपारदर्शिता सेट करें, उसे अंदरूनी शैडो में बदलें, और प्रीव्यू तुरंत अपडेट हो जाता है। आप मौजूदा box-shadow वैल्यू पेस्ट करके उसे विज़ुअली एडिट भी कर सकते हैं। सब कुछ आपके ब्राउज़र में चलता है।
उपयोग कैसे करें
- किसी प्रीसेट से शुरू करें या सैंपल शैडो रखें।
- लेयर बटनों से कोई लेयर चुनें, या ऊपर एक और जोड़ने के लिए + लेयर जोड़ें दबाएँ।
- क्षैतिज ऑफ़सेट, ऊर्ध्वाधर ऑफ़सेट, ब्लर और स्प्रेड खिसकाएँ, रंग चुनें और नरम लुक के लिए अपारदर्शिता घटाएँ। अंदर की ओर शैडो के लिए अंदरूनी शैडो चालू करें।
- प्रीव्यू का बॉक्स का रंग, बैकग्राउंड और कोने की त्रिज्या अपने पेज से मिलाएँ। ये सिर्फ़ प्रीव्यू पर असर डालते हैं।
- CSS कार्ड से कोड कॉपी करें।
नीचे का बॉक्स शैडो CSS बॉक्स एडिट किया जा सकता है: अपनी स्टाइलशीट या डिज़ाइन टूल से शैडो पेस्ट करें, कंट्रोल उसे पढ़ लेंगे। rem या em की लंबाई 16px के हिसाब से px में बदली जाती है।
उदाहरण
.card {
box-shadow:
0 4px 6px -1px rgb(0 0 0 / 0.1),
0 12px 24px -6px rgb(30 64 175 / 0.25);
}स्वाभाविक शैडो के लिए सुझाव
- कम अपारदर्शिता रखें। 5–25% काला असली लगता है; गहरी ठोस शैडो भारी लगती है।
- ऋणात्मक स्प्रेड बड़े ब्लर को किनारों से बाहर फैलने से रोकता है — ज़्यादातर “कार्ड” शैडो का यही राज़ है।
- शैडो में रंग डालें। बैकग्राउंड या ब्रांड रंग की हल्की झलक वाली शैडो सादे भूरे से ज़्यादा समृद्ध लगती है।
- रोशनी एक तरफ़ से। सभी लेयर में ऊर्ध्वाधर ऑफ़सेट धनात्मक रखें ताकि सभी शैडो रोशनी की दिशा पर सहमत रहें।
- परफ़ॉर्मेंस। कई एलिमेंट पर बड़ा ब्लर कमज़ोर फ़ोन पर स्क्रॉलिंग धीमी कर सकता है; शैडो की जगह opacity या transform को एनिमेट करें।
अक्सर पूछे जाने वाले सवाल
› box-shadow के चार अंकों का क्या मतलब है?
क्रम से: क्षैतिज ऑफ़सेट, ऊर्ध्वाधर ऑफ़सेट, ब्लर त्रिज्या और स्प्रेड त्रिज्या। धनात्मक ऑफ़सेट शैडो को दाएँ और नीचे ले जाते हैं। ब्लर किनारे को नरम करता है और ऋणात्मक नहीं हो सकता। स्प्रेड ब्लर लगने से पहले शैडो को बड़ा (धनात्मक) या छोटा (ऋणात्मक) करता है।
› कई शैडो लेयर क्यों इस्तेमाल करें?
असली परछाइयाँ वस्तु के पास तीखी और दूर जाकर हल्की होती हैं। दो या ज़्यादा लेयर, जैसे एक छोटी तीखी और एक बड़ी नरम शैडो, एक गहरे ब्लर से कहीं ज़्यादा स्वाभाविक लगती हैं। ज़्यादातर डिज़ाइन सिस्टम अपने एलिवेशन स्तर ऐसे ही बनाते हैं।
› inset क्या करता है?
inset शैडो को बॉक्स के बाहर की जगह अंदर बनाता है, जैसे एलिमेंट अंदर दबा हो। इसका इस्तेमाल इनपुट फ़ील्ड, दबे हुए बटन और अंदरूनी चमक के लिए होता है। एक ही box-shadow में inset और बाहरी लेयर मिला सकते हैं।
› क्या box-shadow border-radius का पालन करता है?
हाँ। शैडो गोल कोनों सहित एलिमेंट का आकार लेती है, इसलिए प्रीव्यू आपकी सेट की हुई कोने की त्रिज्या इस्तेमाल करता है। यह इमेज के पारदर्शी हिस्सों का पालन नहीं करती; उसके लिए CSS फ़िल्टर drop-shadow() इस्तेमाल करें।