मुख्य सामग्री पर जाएँ
LibraTool logoLibraTool

मुफ़्त CSS बॉक्स शैडो जेनरेटर

लाइव पूर्वावलोकन, मल्टी-लेयर स्टैकिंग, कलर पिकर, इनसेट टॉगल और एक-क्लिक कॉपी के साथ CSS बॉक्स-शैडो के लिए विज़ुअल बिल्डर। इसमें मटेरियल, न्यूमोर्फिज्म और ग्लो प्रीसेट शामिल हैं।

लोड होने के बाद ऑफ़लाइन काम करता है
पूर्वावलोकन पृष्ठभूमि

सक्रिय परत की छाया को स्थिति देने के लिए बॉक्स को खींचें - महीन नियंत्रण के लिए Shift दबाएं

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

प्रीसेट

सामान्य उपयोग

  • कार्ड UI छायाडैशबोर्ड, उत्पाद ग्रिड और डैशबोर्ड के लिए सुरुचिपूर्ण कार्ड छाया बनाएं।
  • बटन प्रेस प्रभावबटन छाया बनाएं जो वास्तविक दुनिया की गहराई और दबाएं राज्यों की नकल करते हैं।
  • न्यूरोमॉर्फिजम सॉफ्ट यूआईयुग्मित हल्के + अंधेरे छाया के साथ नरम-यूआई न्यूरोमॉर्फिजम दिखना बनाएं।
  • मोडल और पॉपओवर छायासंवाद और ड्रॉपडाउन के लिए उन्नत, तैरता हुआ महसूस बनाएं।
  • चमक और फोकस रिंग प्रभावचमकदार प्रभाव, फोकस रिंग और नीयन-शैली हाइलाइट बनाएं।

यह कैसे काम करता है

बॉक्स-शैडो जनरेटर एक पूरी तरह क्लाइंट-साइड React टूल है — कोई सर्वर नहीं, कोई लाइब्रेरी नहीं। यह स्टेट में शैडो लेयर ऑब्जेक्ट की एक सूची रखता है, एक हाथ से लिखे rgba() फ़ॉर्मेटर का उपयोग करके हर बदलाव पर वैध CSS box-shadow स्ट्रिंग बनाता है, और React के style prop के ज़रिए उन्हें सीधे एक प्रीव्यू एलिमेंट पर लागू करता है ताकि ब्राउज़र का अपना रेंडरिंग इंजन परिणाम तुरंत खींचे।

  1. 1
    लेयर पैरामीटर फ़ॉर्मेटर को फ़ीड करते हैं
    हर शैडो लेयर x/y ऑफ़सेट, ब्लर, स्प्रेड, एक हेक्स कलर, और एक ओपेसिटी वैल्यू स्टोर करती है। हर बदलाव पर, एक छोटा shadowToCss फ़ंक्शन रेगेक्स के साथ हेक्स कलर को RGB कंपोनेंट में बदलता है, फिर rgba() स्ट्रिंग बनाता है — उदाहरण के लिए, 0px 4px 12px 0px rgba(0, 0, 0, 0.15)। कई लेयर कॉमा से जोड़ी जाती हैं।
  2. 2
    ब्राउज़र लाइव प्रीव्यू रेंडर करता है
    बनाई गई स्ट्रिंग सीधे JSX में एक div एलिमेंट के boxShadow स्टाइल प्रॉपर्टी को असाइन की जाती है। React DOM एट्रिब्यूट अपडेट करता है, और ब्राउज़र का CSS इंजन तुरंत शैडो पेंट करता है — कोई कैनवस या WebGL शामिल नहीं, बस नेटिव CSS रेंडरिंग।
  3. 3
    ड्रैग-टू-पोज़िशन Pointer Events API उपयोग करता है
    प्रीव्यू बॉक्स पर क्लिक और ड्रैग करने से एलिमेंट पर setPointerCapture कॉल होता है, फिर सक्रिय लेयर के x और y ऑफ़सेट को रीयल टाइम में अपडेट करने के लिए onPointerMove डेल्टा ट्रैक करता है। Shift दबाए रखने से बारीक पोज़िशनिंग के लिए 0.25x स्केल फ़ैक्टर लागू होता है।
  4. 4
    आउटपुट क्लिपबोर्ड में कॉपी होता है
    टूल एक ही लेयर डेटा से दो आउटपुट फ़ॉर्मेट बनाता है: एक स्टैंडर्ड CSS box-shadow डिक्लेरेशन, और एक Tailwind arbitrary-value क्लास (shadow-[...]) जहाँ Tailwind के सिंटैक्स नियमों के अनुसार स्पेस को अंडरस्कोर से बदला जाता है। एक-क्लिक कॉपी navigator.clipboard.writeText उपयोग करती है।

संबंधित टूल

◖

CSS बॉर्डर रेडियस जेनरेटर

प्रत्येक कोने पर स्वतंत्र नियंत्रण के साथ गोलाकार कोनों को दृश्य रूप से डिज़ाइन करें। प्राकृतिक ब्लॉब आकृतियों के लिए अण्डाकार X/Y सिंटैक्स का समर्थन करता है।

आज़माएं
🟦

CSS ग्रिड जनरेटर

CSS ग्रिड को विज़ुअली डिज़ाइन करें — ट्रैक, इकाइयाँ और अंतराल — और जेनरेट किए गए CSS और HTML को कॉपी करें।

आज़माएं
↔️

CSS Flexbox जनरेटर

लाइव आइटम पर flex दिशा, wrap, justify और align के साथ प्रयोग करें — और CSS कॉपी करें।

आज़माएं

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