Skip to main content

सीएसएस बॉक्स शैडो जनरेटर एकाधिक परतों, इनसेट विकल्पों और रियल-टाइम पूर्वावलोकन के साथ सीएसएस बॉक्स शेड्स बनाएं।

सीएसएस बॉक्स शैडो जनरेटर illustration
🎨

सीएसएस बॉक्स शैडो जनरेटर

एकाधिक परतों, इनसेट विकल्पों और रियल-टाइम पूर्वावलोकन के साथ सीएसएस बॉक्स शेड्स बनाएं।

1

छाया पैरामीटर्स को समायोजित करें

प्रत्येक छाया परत के लिए ऑफसेट, धुंधलापन, फैलाव और रंग को नियंत्रित करने के लिए स्लाइडर्स का उपयोग करें।

2

एकाधिक छायाएँ जोड़ें

जटिल गहराई प्रभावों के लिए कई छायाओं की परतें बनाने के लिए "छाया जोड़ें" पर क्लिक करें।

3

कोड को कॉपी करें

बॉक्स पर परिणाम का पूर्वावलोकन करें और उत्पन्न CSS को कॉपी करें।

Loading tool...

What Is सीएसएस बॉक्स शैडो जनरेटर?

सीएसएस बॉक्स शैडो जनरेटर एक दृश्य उपकरण है जो मैनुअल रूप से सीएसएस लिखने के बजाय बॉक्स-शैडो प्रभाव बनाने के लिए उपयोग किया जाता है। बॉक्स शेड्स एचटीएमएल तत्वों में गहराई और आयाम जोड़ते हैं, उन्हें पृष्ठ सतह से उठाया या धंसा हुआ दिखाते हैं। यह उपकरण आपको छाया के हर पहलू पर नियंत्रण करने देता है: क्षैतिज और ऊर्ध्वाधर ऑफसेट, धुंधलापन त्रिज्या, फैलाव दूरी, रंग के साथ अपारदर्शिता, और इनसेट मोड। आप वास्तविक गहराई प्रभाव बनाने के लिए कई शेडो परतों को ढेर कर सकते हैं जैसे कि सामग्री डिज़ाइन उन्नयन, नरम तैरते कार्ड, या हल्के आंतरिक चमक। प्रत्येक छाया परत में स्वतंत्र नियंत्रण होते हैं, इसलिए आप गहराई के लिए एक बड़ी नरम छाया को परिभाषा के लिए एक छोटी तेज़ छाया के साथ जोड़ सकते हैं। लाइव पूर्वावलोकन आपके बदलावों को तुरंत एक अनुकूलित बॉक्स पर दिखाता है, और उत्पन्न सीएसएस कोड उत्पादन उपयोग के लिए तैयार है।

Why Use सीएसएस बॉक्स शैडो जनरेटर?

  • दृश्य नियंत्रण जटिल बहु-परत वाली छायाओं बनाना आसान बनाते हैं
  • बाहरी और इनसेट दोनों छायाओं को स्वतंत्र नियंत्रण के साथ समर्थन करता है
  • एक अनुकूलन योग्य पूर्वावलोकन बॉक्स पर वास्तविक समय पूर्वावलोकन
  • स्वच्छ CSS उत्पन्न करता है जिसमें कई छाया परतें ठीक से स्वरूपित होती हैं

Common Use Cases

कार्ड एलिवेशन

परत वाली छायाओं के साथ तैरते हुए कार्ड प्रभाव बनाएँ जो मैटेरियल डिज़ाइन के लिए उपयुक्त हों।

बटन गहराई

बटन पर बारीक छाया जोड़कर एक क्लिक करने योग्य, उठी हुई उपस्थिति बनाएँ।

मॉडल ओवरले

दृश्य पृथक्करण बनाने के लिए मॉडल और पॉपअप के लिए छाया प्रभाव डिज़ाइन करें।

आंतरिक ग्लो प्रभाव

दबाए गए या खोखले तत्व शैलियों बनाने के लिए इनसेट छाया का उपयोग करें।

Technical Guide

सीएसएस बॉक्स-शैडो संपत्ति एक या अधिक शेडो मानों को स्वीकार करती है जो अल्पविराम द्वारा अलग किए जाते हैं। प्रत्येक शेडो मान में शामिल हैं: क्षैतिज ऑफसेट (x), ऊर्ध्वाधर ऑफसेट (y), धुंधलापन त्रिज्या (वैकल्पिक), फैलाव त्रिज्या (वैकल्पिक), रंग (वैकल्पिक), और इनसेट कीवर्ड (वैकल्पिक)। सकारात्मक x मान छाया को दाईं ओर धकेलते हैं, सकारात्मक y मान इसे नीचे धकेलते हैं। धुंधलापन त्रिज्या एक गॉसियन ब्लर प्रभाव बनाती है - बड़े मान नरम छाया बनाते हैं। फैलाव त्रिज्या छाया को बढ़ाती या सिकोड़ती है; नकारात्मक मान तत्व से छोटी छाया बनाते हैं। कई शेड्स को उनके आदेश में रेंडर किया जाता है - पहली शेडो सबसे ऊपर दिखाई देती है। प्रदर्शन के लिए, अक्सर एनिमेटेड तत्वों पर बॉक्स शेड्स का उपयोग कम से कम करें क्योंकि वे महंगे रीपेंट ट्रिगर कर सकते हैं। गैर-आयताकार आकारों के लिए फ़िल्टर: ड्रॉप-शैडो() का उपयोग करने पर विचार करें। आधुनिक ब्राउज़र बॉक्स-शेडो को वेंडर प्रीफिक्स के बिना पूरी तरह से समर्थन करते हैं।

Tips & Best Practices

  • 1
    वास्तविक दृश्य गहराई के लिए एक बड़ी धुंधली छाया को एक छोटी तेज़ छाया के साथ परत करें
  • 2
    प्राकृतिक दिखने वाली छायाओं के लिए आरजीबीए रंगों का उपयोग कम अल्फा के साथ करें
  • 3
    3डी बटन प्रभावों के लिए इनसेट और आउटर छाया को मिलाएं
  • 4
    एक एकीकृत दिखने के लिए छाया रंगों को पृष्ठभूमि रंग से संबंधित रखें

Related Tools

Frequently Asked Questions

Q क्या मैं एकाधिक छायाएँ जोड़ सकता हूँ?
हाँ, कई छायाओं की परतें बनाने के लिए "छाया जोड़ें" पर क्लिक करें। प्रत्येक के पास ऑफसेट, धुंधलापन, फैलाव और रंग के लिए स्वतंत्र नियंत्रण होते हैं।
Q इनसेट छाया क्या है?
एक इनसेट छाया तत्व के अंदर दिखाई देती है, एक दबाया या खोखला प्रभाव बनाती है।
Q मैं एक नरम छाया कैसे बना सकता हूँ?
धुंधलापन त्रिज्या बढ़ाएं और कम-अपारदर्शिता वाले रंग का उपयोग करें। 20-40px का धुंधलापन और 10-20% अपारदर्शिता एक नरम, प्राकृतिक छाया बनाती है।
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.