बॉक्स शैडो जनरेटर: परतों और पूर्वावलोकन के साथ CSS छाया

इसका इस्तेमाल कैसे करें

पहली परत का क्षैतिज ऑफ़सेट और ऊर्ध्वाधर ऑफ़सेट तय करें। धनात्मक ऊर्ध्वाधर ऑफ़सेट छाया को नीचे ले जाता है।
किनारा नरम करने के लिए ब्लर बढ़ाएँ, और छाया को बॉक्स से बड़ा या छोटा करने के लिए स्प्रेड।
रंग और अपारदर्शिता चुनें। ज्यादा स्वाभाविक छाया के लिए परत जोड़ें से और परतें जोड़ें।
CSS की घोषणा कॉपी करें और अपने तत्व के नियम में चिपकाएँ।

मान कैसे बनता है

box-shadow प्रॉपर्टी एक या ज्यादा छायाएँ लेती है, जो कॉमा से अलग हों। हर एक लिखी जाती है: वैकल्पिक inset कीवर्ड, क्षैतिज और ऊर्ध्वाधर ऑफ़सेट, ब्लर त्रिज्या, स्प्रेड दूरी और रंग। पहली छाया बाकी के ऊपर बनाई जाती है, और बिना छाया के मान none होता है।

ब्लर त्रिज्या कभी ऋणात्मक नहीं होती। बड़ा ब्लर छाया को चौड़े क्षेत्र में नरमी से फैलाता है; स्प्रेड छाया को ब्लर लगने से पहले बड़ा या छोटा करता है। अपारदर्शिता rgba रंग के alpha मान के रूप में लिखी जाती है, अधिकतम दो दशमलव के साथ।

box-shadow: [inset] ऑफ़सेट-x ऑफ़सेट-y ब्लर स्प्रेड रंग, ...

परतें और एडिटर की जाँच

नरम, स्वाभाविक छाया में अक्सर दो परतें होती हैं: बॉक्स के पास एक छोटी, गहरी, और दूर बाहर की ओर एक बड़ी, हल्की। हर परत मान में एक छाया है। एडिटर 8 परतों तक, −200 से 200 पिक्सल तक के ऑफ़सेट और स्प्रेड, 0 से 200 पिक्सल तक के ब्लर और 0 से 100 प्रतिशत तक की अपारदर्शिता देता है।

पूर्वावलोकन वही मान इस्तेमाल करता है जो कोड में है, इसलिए जो आप देखते हैं वही ब्राउज़र बनाता है। बहुत बड़े ब्लर और स्प्रेड पुराने फ़ोन पर धीमे बनते हैं, इसलिए काम चलने वाले सबसे छोटे मान रखें।

हल किया हुआ उदाहरण: दो परतों वाला कार्ड

पहली परत का ऑफ़सेट 0 और 4 पिक्सल है, ब्लर 6, बिना स्प्रेड, काले रंग में, 10 प्रतिशत अपारदर्शिता पर। दूसरी का ऑफ़सेट 0 और 10 पिक्सल है, ब्लर 20, 15 प्रतिशत पर। मान है 0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 10px 20px 0px rgba(0, 0, 0, 0.15)।

कार्ड में चिपकाने पर यह ऐसी छाया देता है जो कार्ड के ठीक नीचे तीखी और नीचे की ओर दूर तक नरम होती है।

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

inset क्या करता है?

inset छाया बॉक्स के भीतर, उसके किनारों के साथ बनती है, मानो बॉक्स दबा हुआ हो। यह इनपुट फ़ील्ड और दबे हुए बटन के लिए काम आता है। एक बॉक्स में inset और बाहर की छायाएँ साथ हो सकती हैं।

ऑफ़सेट पर चिह्न क्यों होता है?

धनात्मक क्षैतिज ऑफ़सेट छाया को दाईं ओर और ऋणात्मक को बाईं ओर ले जाता है। धनात्मक ऊर्ध्वाधर ऑफ़सेट उसे नीचे ले जाता है, इसलिए बॉक्स के नीचे पड़ने वाली छाया का मान धनात्मक होता है।

ब्लर और स्प्रेड में क्या अंतर है?

ब्लर छाया के किनारे को नरम करता है, ताकि वह चौड़े क्षेत्र में धीरे-धीरे गायब हो। स्प्रेड ब्लर से पहले छाया को खुद बड़ा करता है, या ऋणात्मक होने पर छोटा। ब्लर शून्य से नीचे नहीं जाता, पर स्प्रेड जा सकता है।

क्या बनाया गया CSS सभी ब्राउज़रों में चलता है?

बिना प्रीफ़िक्स वाली box-shadow प्रॉपर्टी, कॉमा से अलग कई परतों और rgba रंगों के साथ, आज के सभी ब्राउज़रों में चलती है और सालों से चल रही है। घोषणा बिना किसी वेंडर प्रीफ़िक्स के वैसी ही इस्तेमाल की जा सकती है।

क्या एडिटर कुछ सहेजता या भेजता है?

नहीं। छाया आपके ब्राउज़र में बनती है, और कुछ भी हमारे सर्वर पर सहेजा या भेजा नहीं जाता। पेज छोड़ने से पहले CSS कॉपी करें, क्योंकि रीलोड होने पर डिफ़ॉल्ट छाया से शुरू होता है।

स्रोत

आँकड़े और टेक्स्ट आखिरी बार मंगलवार, 10 नवंबर 2026 को जाँचे गए।