বিনামূল্যে CSS বক্স শ্যাডো জেনারেটর

কিভাবে কাজ করে

box-shadow জেনারেটর একটি সম্পূর্ণ ক্লায়েন্ট-সাইড React টুল — কোনো সার্ভার বা লাইব্রেরি নেই। এটি state-এ শ্যাডো লেয়ার অবজেক্টের তালিকা রাখে, হাতে লেখা rgba() ফরম্যাটার দিয়ে প্রতিটি পরিবর্তনে বৈধ CSS box-shadow স্ট্রিং তৈরি করে, এবং React-এর style prop দিয়ে সরাসরি প্রিভিউ এলিমেন্টে প্রয়োগ করে, যাতে ব্রাউজারের নিজস্ব রেন্ডারিং ইঞ্জিন সঙ্গে সঙ্গে ফলাফল আঁকে।

1. 1
   লেয়ারের প্যারামিটার ফরম্যাটারে যায়

   প্রতিটি শ্যাডো লেয়ার x/y অফসেট, blur, spread, একটি hex রং এবং একটি অস্বচ্ছতার মান রাখে। প্রতিটি পরিবর্তনে ছোট একটি shadowToCss ফাংশন regex দিয়ে hex রংকে RGB অংশে রূপান্তর করে rgba() স্ট্রিং তৈরি করে — যেমন 0px 4px 12px 0px rgba(0, 0, 0, 0.15)। একাধিক লেয়ার কমা দিয়ে জোড়া হয়।
2. 2
   ব্রাউজার লাইভ প্রিভিউ আঁকে

   তৈরি স্ট্রিংটি JSX-এ সরাসরি একটি div এলিমেন্টের boxShadow স্টাইল প্রপার্টিতে দেওয়া হয়। React DOM অ্যাট্রিবিউট আপডেট করে, আর ব্রাউজারের CSS ইঞ্জিন সঙ্গে সঙ্গে শ্যাডো আঁকে — কোনো canvas বা WebGL নেই, শুধু নেটিভ CSS রেন্ডারিং।
3. 3
   টেনে অবস্থান বদলাতে Pointer Events API

   প্রিভিউ বক্সে ক্লিক করে টানলে এলিমেন্টে setPointerCapture ডাকা হয়, তারপর onPointerMove-এর পরিবর্তন ধরে সক্রিয় লেয়ারের x ও y অফসেট রিয়েল টাইমে আপডেট হয়। Shift চেপে রাখলে সূক্ষ্ম অবস্থানের জন্য 0.25x স্কেল ফ্যাক্টর প্রয়োগ হয়।
4. 4
   আউটপুট ক্লিপবোর্ডে কপি হয়

   টুলটি একই লেয়ার ডেটা থেকে দুটি আউটপুট ফরম্যাট দেয়: সাধারণ CSS box-shadow ঘোষণা, এবং একটি Tailwind arbitrary-value ক্লাস (shadow-[...]) যেখানে Tailwind-এর সিনট্যাক্স নিয়ম অনুযায়ী স্পেসের বদলে আন্ডারস্কোর বসে। এক-ক্লিক কপি navigator.clipboard.writeText ব্যবহার করে।

সম্পর্কিত টুলস