मुख्य सामग्रीमा जानुहोस्
LibraTool logoLibraTool

निःशुल्क CSS बक्स शेडो जेनेरेटर

लाइभ प्रिभ्यू, बहु-तह स्ट्याकिङ, रङ चयनकर्ता, inset टगल, र एक-क्लिक कपीसहित CSS box-shadow का लागि भिजुअल बिल्डर। Material, neumorphism, र glow प्रिसेटहरू समावेश छन्।

लोड भएपछि अफलाइन काम गर्छ
पूर्वावलोकन पृष्ठभूमि

सक्रिय तहको छायाँको स्थान बदल्न बक्स तान्नुहोस् - सूक्ष्म नियन्त्रणका लागि Shift थिचिराख्नुहोस्

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

पूर्वनिर्धारित

सामान्य प्रयोगहरू

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

यो कसरी काम गर्छ

box-shadow जेनेरेटर पूर्ण रूपमा क्लाइन्ट-साइड React उपकरण हो — कुनै सर्भर छैन, कुनै लाइब्रेरी छैन। यसले स्टेटमा शैडो लेयर अब्जेक्टहरूको सूची राख्छ, हातले लेखिएको rgba() फर्म्याटर प्रयोग गरी हरेक परिवर्तनमा मान्य CSS box-shadow स्ट्रिङहरू जोड्छ, र तिनलाई React को style प्रोपमार्फत पूर्वावलोकन एलिमेन्टमा प्रत्यक्ष लागू गर्छ ताकि ब्राउजरको आफ्नै रेन्डरिङ इन्जिनले नतिजा तुरुन्तै कोर्छ।

  1. 1
    लेयर प्यारामिटरहरूले फर्म्याटर खुवाउँछन्
    हरेक शैडो लेयरले x/y अफसेट, ब्लर, स्प्रेड, एउटा hex रङ, र एउटा अपासिटी मान भण्डारण गर्छ। हरेक परिवर्तनमा, एउटा सानो shadowToCss फङ्सनले hex रङलाई रेगेक्स प्रयोग गरी 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 बोर्डर रेडियस जेनेरेटर

प्रत्येक कुनामा स्वतन्त्र नियन्त्रणका साथ गोलाकार कुनाहरू दृश्यात्मक रूपमा डिजाइन गर्नुहोस्। जैविक blob आकारहरूका लागि elliptical X/Y सिन्ट्याक्स समर्थन गर्छ।

प्रयास गर्नुहोस्
🟦

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

CSS ग्रिड दृश्यमान रूपमा डिजाइन गर्नुहोस् — ट्र्याकहरू, एकाइहरू र अंतरहरू — र उत्पन्न CSS र HTML प्रतिलिपि गर्नुहोस्।

प्रयास गर्नुहोस्
↔️

CSS Flexbox जनरेटर

Flex दिशा, र्याप, जस्टिफाई र लाइभ वस्तुहरूमा पङ्क्तिबद्ध गर्नुहोस् — र CSS प्रतिलिपि गर्नुहोस्।

प्रयास गर्नुहोस्

बारम्बार सोधिने प्रश्नहरू