बॉक्स शैडो जनरेटर
विज़ुअल नियंत्रण और कोड आउटपुट के साथ CSS box-shadow बनाएं। मुफ़्त, तेज़ और बिना साइन-अप के पूरी तरह आपके ब्राउज़र में काम करता है।
अपडेट किया गया
Box Shadow Generator
Create beautiful multi-layer CSS box shadows with live preview, presets, and multiple output formats.
Live Preview
Drag the element to adjust active layer's X/Y offset
Shadow Layers1
Preset Library
Material
Neumorphic
Glow
Card
Button
Generated Code
.element {
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.10);
}About Box Shadow Generator
- Multiple shadow layers with individual enable/disable
- Drag the preview element to set X/Y offset interactively
- Layer reordering, duplication, and removal
- Neumorphism generator with auto color calculation
- 15+ curated presets across 5 style groups
- Preview element: card, button, avatar, image
- Output: CSS, Tailwind, SCSS, styled-components, Design Tokens
- History with up to 20 saved states
Privacy First: All processing happens locally in your browser. No data is sent to any server.
अक्सर पूछे जाने वाले प्रश्न
पाँच box-shadow वैल्यू का क्या मतलब है?
एक CSS box-shadow पाँच हिस्सों से बनता है, और इस टूल का हर स्लाइडर उनमें से एक को मैप करता है। X offset छाया को बाएँ या दाएँ खिसकाता है, और Y offset इसे ऊपर या नीचे खिसकाता है, इसलिए धनात्मक Y छाया को एलिमेंट के नीचे गिराता है जैसे ऊपर से प्रकाश हो। Blur radius नियंत्रित करता है कि किनारा कितना नरम है: ज़ीरो एक कठिन, क्रिस्प रेखा देता है, जबकि बड़ी वैल्यू इसे एक फैली हुई धुंध में बदल देती है। Spread blur लगाने से पहले छाया को बढ़ाता या घटाता है। Color, अपनी opacity के साथ, एक rgba() वैल्यू के रूप में आउटपुट होता है ताकि पारदर्शिता बेक हो। एक छठा कीवर्ड, inset, पूरी छाया को अंदर की ओर पलट देता है एक दबे हुए लुक के लिए। ऊपर हर स्लाइडर एडजस्ट करें और लाइव प्रिव्यू तुरंत अपडेट होता है, ताकि आप देख सकें कि कोई वैल्यू परिणाम को कैसे बदलता है, कोड कॉपी करने से पहले।
मैं एक एलिमेंट पर कई box shadow कैसे स्टैक करूं?
CSS में आप कई shadow को एक box-shadow rule में रखते हैं, हर एक को कॉमा से अलग करके, और वे पीछे से आगे तक रेंडर होते हैं, इसलिए पहली shadow सबसे ऊपर बैठती है। यह टूल यह आपके लिए हैंडल करता है: आप एक नई लेयर जोड़ते हैं, और यह comma-separated syntax को स्वचालित रूप से मैनेज करता है। लेयरिंग इसी तरह यथार्थवादी गहराई बनाई जाती है, क्योंकि एक single shadow सपाट दिखती है जबकि अलग-अलग offset, blur, और opacity पर दो या तीन वास्तव में प्रकाश कैसे गिरता है उसकी नकल करती हैं। आप लेयर पुनःक्रमित कर सकते हैं, किसी एक को प्रारंभिक बिंदु के रूप में डुप्लिकेट कर सकते हैं, और बिना डिलीट किए किसी भी लेयर को ऑन या ऑफ टॉगल कर सकते हैं। Material elevation प्रिसेट बिल्कुल इसी दृष्टिकोण का इस्तेमाल करते हैं, Google के spec की तरह प्रति लेवल दो या तीन लेयर स्टैक करते हैं। ऊपर लेयर कंट्रोल से अपना स्टैक बनाएँ, फिर संयुक्त rule एक क्लिक में कॉपी करें।
Negative spread क्या है और यह card shadow को बेहतर क्यों बनाता है?
Spread छाया को blur लगाने से पहले बढ़ाता या सिकोड़ता है। धनात्मक spread छाया को एलिमेंट से बड़ा बनाता है, जबकि negative spread इसे अंदर की ओर सिकोड़ता है ताकि छाया नीचे कसकर बैठे। Negative spread आधुनिक card shadow के पीछे की तरकीब है: छाया को अंदर खींचकर और एक छोटे Y offset से नीचे धकेलकर, आपको कार्ड के ठीक नीचे एक नरम shadow pool मिलता है बजाय इसके कि हर तरफ फैली धुंधली halo लीक हो। वह एक सूक्ष्म, ज़मीन पर स्थित elevation के रूप में पढ़ी जाती है, न कि पुरानी drop shadow के रूप में। कम opacity रंग को negative spread और moderate blur के साथ जोड़ना वह रेसिपी है जो अधिकांश डिज़ाइन सिस्टम स्वच्छ, उठे हुए कार्ड के लिए इस्तेमाल करते हैं। यहाँ spread स्लाइडर -50px से 50px तक चलता है, इसलिए negative वैल्यू सेट करें, प्रिव्यू कसने को देखें, और परिणाम सीधे अपनी स्टाइलशीट में कॉपी करें।
Neumorphism क्या है और soft-UI मोड इसे कैसे बनाता है?
Neumorphism, या soft UI, एक ऐसी शैली है जिसमें एलिमेंट बैकग्राउंड के ऊपर तैरते हुए दिखने के बजाय उसी से निकाले गए लगते हैं, जैसे एक ही सामग्री से दबाकर बनाए गए हों। इस प्रभाव के लिए एक ही surface color पर दो shadow चाहिए: एक तरफ गहरी shadow और दूसरी तरफ हल्का highlight, ताकि एलिमेंट हल्के से उठा हुआ दिखे। उस जोड़ी को हाथ से सही बनाना चुभड़ है क्योंकि दोनों shadow एक ही base color से व्युत्पन्न होने चाहिए। इस टूल का समर्पित Neumorphism मोड आपके लिए गणित करता है: एक base color, intensity, distance, और blur सेट करें, और यह मैचिंग light और dark shadow जोड़ी स्वचालित रूप से गणना करता है। आप इसे कार्ड, बटन, या अवतार पर प्रिव्यू कर सकते हैं और light और dark बैकग्राउंड के बीच स्विच करके कंट्रास्ट जाँच सकते हैं। ऊपर soft-UI मोड खोलें, base color ट्यून करें, और जनरेट की गई shadow जोड़ी कॉपी करें।
क्या मैं shadow को Tailwind, SCSS, या design tokens के रूप में एक्सपोर्ट कर सकता हूँ?
हाँ। जनरेटर उसी shadow को पाँच copy-ready फॉर्मैट में उत्पन्न करता है ताकि यह सीधे आपके स्टैक में बैठ जाए। आपको मिलता है सादा CSS एक पेस्ट-तैयार box-shadow rule के रूप में, एक Tailwind arbitrary-value क्लास shadow-[...] रूप में, एक SCSS वैरिएबल जिसे आप partials में पुनः उपयोग कर सकें, एक styled-components template literal CSS-in-JS के लिए, और design tokens मानक token आकार में JSON के रूप में design-system पाइपलाइन के लिए। आप पूरी rule कॉपी कर सकते हैं, केवल raw वैल्यू कॉपी कर सकते हैं जब आपको प्रॉपर्टी के बाद का हिस्सा चाहिए, या परिणाम को फ़ाइल के रूप में डाउनलोड कर सकते हैं। एक बिल्ट-इन हिस्ट्री आपके 20 हालिया स्टेट तक रखती है, ताकि आप बिना अपना काम दोहराए किसी पुराने वर्शन पर वापस जा सकें। ऊपर अपनी पसंद का shadow बनाएँ, अपने प्रोजेक्ट से मेल खाता फॉर्मैट चुनें, और एक क्लिक में कोड लें।
Embed This Tool
Add a free, live version of this widget to your own website or blog post — it runs entirely in your visitors' browsers, with a credit link back to The Toolbox.
<iframe src="https://getthetoolbox.com/embed/box-shadow-generator" title="Box Shadow Generator — The Toolbox" width="100%" height="360" style="max-width:480px;border:1px solid #e2e8f0;border-radius:12px" loading="lazy"></iframe>
<p style="font-size:12px;margin:4px 0 0"><a href="https://getthetoolbox.com/utility-tools/box-shadow-generator?utm_source=embed&utm_medium=widget" target="_blank" rel="noopener">Free Box Shadow Generator</a> by The Toolbox</p>संबंधित टूल
मुफ़्त सुरक्षित पासवर्ड जनरेटर
अनुकूलन योग्य विकल्पों के साथ सुरक्षित, यादृच्छिक पासवर्ड बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त UUID/GUID जनरेटर
सार्वभौमिक रूप से अद्वितीय पहचानकर्ता (UUID/GUID) बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त QR कोड जनरेटर ऑनलाइन
URL, टेक्स्ट, WiFi क्रेडेंशियल और बहुत कुछ के लिए QR कोड बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
मुफ़्त JSON फ़ॉर्मेटर और वैलिडेटर
सिंटैक्स हाइलाइटिंग और त्रुटि पहचान के साथ JSON डेटा को फ़ॉर्मेट, सत्यापित और सुंदर बनाएं। मुफ़्त, तेज़ और पूरी तरह आपके ब्राउज़र में काम करता है, बिना साइन-अप के।
Box Shadow Generator के बारे में
Box Shadow Generator CSS box-shadow वैल्यू बिना हाथ से लिखे बनाने के लिए एक मुफ़्त visual tool है। आप offset, blur, spread, color, और opacity slider के साथ एडजस्ट करते हैं और एक लाइव प्रिव्यू को real time में अपडेट होते देखते हैं, फिर generated code सीधे अपनी स्टाइलशीट में कॉपी करते हैं। यह front-end developer, UI designer, और किसी कंपोनेंट को tweak कर रहे किसी भी व्यक्ति के लिए बनाया गया है जो अंक के अनुमान से अधिक shadow देखना पसंद करते हैं।
एक single-shadow picker के विपरीत, यह generator layer में काम करता है। आप एक एलिमेंट पर कई shadow stack कर सकते हैं, उन्हें reorder कर सकते हैं, एक लेयर duplicate कर सकते हैं, और individual लेयर on या off toggle कर सकते हैं — वही तकनीक professional design system physical लगने वाली गहराई बनाने के लिए इस्तेमाल करते हैं।
Box shadow क्या है और control CSS से कैसे map होते हैं
एक CSS box shadow पाँच वैल्यू से defined होता है, और यहाँ हर slider उनमें से एक के अनुरूप है:
- X और Y offset — shadow को कितना क्षैतिज और ऊर्ध्वाधर खिसकाया जाता है, -50px से 50px। धनात्मक Y shadow को एलिमेंट के नीचे गिराता है; negative Y इसे ऊपर उठाता है।
- Blur radius — किनारा कितना नरम है, 0 (एक hard, crisp shadow) से 100px तक। बड़ा blur एक ऊँचे, अधिक फैले हुए light source के रूप में पढ़ा जाता है।
- Spread — blur लगाने से पहले shadow को बढ़ाता या घटाता है, -50px से 50px। Negative spread tight, modern card shadow के पीछे की तरकीब है।
- Color और opacity — कोई भी hex color चुनें और opacity 0 से 100% सेट करें। टूल परिणाम को
rgba()वैल्यू के रूप में आउटपुट करता है ताकि पारदर्शिता बेक हो। - Inset — एक checkbox जो shadow को अंदर की ओर पलट देता है, एक pressed या recessed look बनाता है बजाय उठे हुए के।
आप active लेयर के X और Y offset सेट करने के लिए preview एलिमेंट को सीधे drag कर सकते हैं, या जब सटीकता चाहिए तो input field में सटीक नंबर टाइप कर सकते हैं।
Preset, neumorphism, और लाइव प्रिव्यू
पंद्रह curated preset पाँच style में grouped हैं — Material elevation, Neumorphic, Glow, Card, और Button — ताकि आप एक proven look से शुरू करें और वहाँ से एडजस्ट करें। Material preset elevation level mirror करते हैं (हर एक दो या तीन लेयर stack करता है, बिल्कुल Google के spec की तरह), जबकि Glow preset एलिमेंट को light में ring करने के लिए colored blur के साथ zero offset इस्तेमाल करते हैं।
एक समर्पित Neumorphism mode soft-UI "surface से उठा हुआ" प्रभाव स्वचालित रूप से generate करता है: आप एक base color, intensity, distance, और blur सेट करते हैं, और टूल आपके लिए मैचिंग light और dark shadow जोड़ी गणना करता है। अपनी shadow को card, button, avatar, या image पर preview करें, light और dark background के बीच switch करें, और rounded shape पर shadow कैसा व्यवहार करता है देखने के लिए एलिमेंट के border radius 100px तक एडजस्ट करें।
पाँच फॉर्मैट में copy-ready आउटपुट
जब shadow सही दिखे, इसे आपके प्रोजेक्ट की ज़रूरत के अनुसार export करें। Generator produce करता है:
- CSS — एक पेस्ट-तैयार
box-shadowrule। - Tailwind — एक arbitrary-value
shadow-[...]क्लास। - SCSS — एक पुनः उपयोग योग्य
$box-shadowवैरिएबल। - styled-components — एक styled template literal।
- Design tokens — design-system पाइपलाइन के लिए standard token आकार में JSON।
पूरी rule कॉपी करें, केवल raw वैल्यू कॉपी करें, या परिणाम को फ़ाइल के रूप में download करें। एक बिल्ट-इन history आपके 20 हालिया state तक रखती है ताकि आप बिना अपना काम खोए किसी पुराने वर्शन पर वापस जा सकें।
सब कुछ पूरी तरह आपके browser में चलता है। कोई sign-up नहीं, कोई upload नहीं, और कोई server processing नहीं — आपके color, वैल्यू, और generated code कभी आपकी डिवाइस नहीं छोड़ते, इसलिए टूल वैसे ही काम करता है चाहे आप online हों या offline। ऊपर slider एडजस्ट करें, code लें, और कुछ ही सेकंड में एक polished shadow अपने डिज़ाइन में डालें।