सीएसएस बॉक्स शैडो जनरेटर एकाधिक परतों, इनसेट विकल्पों और रियल-टाइम पूर्वावलोकन के साथ सीएसएस बॉक्स शेड्स बनाएं।
सीएसएस बॉक्स शैडो जनरेटर
एकाधिक परतों, इनसेट विकल्पों और रियल-टाइम पूर्वावलोकन के साथ सीएसएस बॉक्स शेड्स बनाएं।
छाया पैरामीटर्स को समायोजित करें
प्रत्येक छाया परत के लिए ऑफसेट, धुंधलापन, फैलाव और रंग को नियंत्रित करने के लिए स्लाइडर्स का उपयोग करें।
एकाधिक छायाएँ जोड़ें
जटिल गहराई प्रभावों के लिए कई छायाओं की परतें बनाने के लिए "छाया जोड़ें" पर क्लिक करें।
कोड को कॉपी करें
बॉक्स पर परिणाम का पूर्वावलोकन करें और उत्पन्न CSS को कॉपी करें।
What Is सीएसएस बॉक्स शैडो जनरेटर?
सीएसएस बॉक्स शैडो जनरेटर एक दृश्य उपकरण है जो मैनुअल रूप से सीएसएस लिखने के बजाय बॉक्स-शैडो प्रभाव बनाने के लिए उपयोग किया जाता है। बॉक्स शेड्स एचटीएमएल तत्वों में गहराई और आयाम जोड़ते हैं, उन्हें पृष्ठ सतह से उठाया या धंसा हुआ दिखाते हैं। यह उपकरण आपको छाया के हर पहलू पर नियंत्रण करने देता है: क्षैतिज और ऊर्ध्वाधर ऑफसेट, धुंधलापन त्रिज्या, फैलाव दूरी, रंग के साथ अपारदर्शिता, और इनसेट मोड। आप वास्तविक गहराई प्रभाव बनाने के लिए कई शेडो परतों को ढेर कर सकते हैं जैसे कि सामग्री डिज़ाइन उन्नयन, नरम तैरते कार्ड, या हल्के आंतरिक चमक। प्रत्येक छाया परत में स्वतंत्र नियंत्रण होते हैं, इसलिए आप गहराई के लिए एक बड़ी नरम छाया को परिभाषा के लिए एक छोटी तेज़ छाया के साथ जोड़ सकते हैं। लाइव पूर्वावलोकन आपके बदलावों को तुरंत एक अनुकूलित बॉक्स पर दिखाता है, और उत्पन्न सीएसएस कोड उत्पादन उपयोग के लिए तैयार है।
Why Use सीएसएस बॉक्स शैडो जनरेटर?
-
दृश्य नियंत्रण जटिल बहु-परत वाली छायाओं बनाना आसान बनाते हैं
-
बाहरी और इनसेट दोनों छायाओं को स्वतंत्र नियंत्रण के साथ समर्थन करता है
-
एक अनुकूलन योग्य पूर्वावलोकन बॉक्स पर वास्तविक समय पूर्वावलोकन
-
स्वच्छ CSS उत्पन्न करता है जिसमें कई छाया परतें ठीक से स्वरूपित होती हैं
Common Use Cases
कार्ड एलिवेशन
परत वाली छायाओं के साथ तैरते हुए कार्ड प्रभाव बनाएँ जो मैटेरियल डिज़ाइन के लिए उपयुक्त हों।
बटन गहराई
बटन पर बारीक छाया जोड़कर एक क्लिक करने योग्य, उठी हुई उपस्थिति बनाएँ।
मॉडल ओवरले
दृश्य पृथक्करण बनाने के लिए मॉडल और पॉपअप के लिए छाया प्रभाव डिज़ाइन करें।
आंतरिक ग्लो प्रभाव
दबाए गए या खोखले तत्व शैलियों बनाने के लिए इनसेट छाया का उपयोग करें।
Technical Guide
सीएसएस बॉक्स-शैडो संपत्ति एक या अधिक शेडो मानों को स्वीकार करती है जो अल्पविराम द्वारा अलग किए जाते हैं। प्रत्येक शेडो मान में शामिल हैं: क्षैतिज ऑफसेट (x), ऊर्ध्वाधर ऑफसेट (y), धुंधलापन त्रिज्या (वैकल्पिक), फैलाव त्रिज्या (वैकल्पिक), रंग (वैकल्पिक), और इनसेट कीवर्ड (वैकल्पिक)। सकारात्मक x मान छाया को दाईं ओर धकेलते हैं, सकारात्मक y मान इसे नीचे धकेलते हैं। धुंधलापन त्रिज्या एक गॉसियन ब्लर प्रभाव बनाती है - बड़े मान नरम छाया बनाते हैं। फैलाव त्रिज्या छाया को बढ़ाती या सिकोड़ती है; नकारात्मक मान तत्व से छोटी छाया बनाते हैं। कई शेड्स को उनके आदेश में रेंडर किया जाता है - पहली शेडो सबसे ऊपर दिखाई देती है। प्रदर्शन के लिए, अक्सर एनिमेटेड तत्वों पर बॉक्स शेड्स का उपयोग कम से कम करें क्योंकि वे महंगे रीपेंट ट्रिगर कर सकते हैं। गैर-आयताकार आकारों के लिए फ़िल्टर: ड्रॉप-शैडो() का उपयोग करने पर विचार करें। आधुनिक ब्राउज़र बॉक्स-शेडो को वेंडर प्रीफिक्स के बिना पूरी तरह से समर्थन करते हैं।
Tips & Best Practices
-
1वास्तविक दृश्य गहराई के लिए एक बड़ी धुंधली छाया को एक छोटी तेज़ छाया के साथ परत करें
-
2प्राकृतिक दिखने वाली छायाओं के लिए आरजीबीए रंगों का उपयोग कम अल्फा के साथ करें
-
33डी बटन प्रभावों के लिए इनसेट और आउटर छाया को मिलाएं
-
4एक एकीकृत दिखने के लिए छाया रंगों को पृष्ठभूमि रंग से संबंधित रखें
Related Tools
सीएसएस टेक्स्ट शैडो जनरेटर
विज़ुअल नियंत्रणों के साथ ऑफ़सेट, धुंधलापन, रंग और अपारदर्शिता के लिए सीएसएस टेक्स्ट शैडो बनाएं।
🎨 CSS & Design
सीएसएस बटन जनरेटर
रंगों, पैडिंग, सीमाओं, छाया और होवर प्रभावों के साथ कस्टम सीएसएस बटन डिज़ाइन करें।
🎨 CSS & Design
सीएसएस कार्ड जनरेटर
बैकड्रॉप ब्लर, पारदर्शिता और शैडो नियंत्रण के साथ ग्लासमॉर्फिक कार्ड डिज़ाइन बनाएं।
🎨 CSS & Design
न्यूमॉर्फिज़म जनरेटर
प्रकाश और अंधकार छाया जोड़ियों के साथ न्यूमॉर्फिक (सॉफ्ट यूआई) डिज़ाइन बनाएं।
🎨 CSS & DesignFrequently Asked Questions
Q क्या मैं एकाधिक छायाएँ जोड़ सकता हूँ?
Q इनसेट छाया क्या है?
Q मैं एक नरम छाया कैसे बना सकता हूँ?
Q क्या बॉक्स-छाया लेआउट को प्रभावित करती है?
Q क्या मैं बॉक्स-छाया को एनिमेट कर सकता हूँ?
About This Tool
सीएसएस बॉक्स शैडो जनरेटर is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.