বিনামূল্যে CSS গ্র্যাডিয়েন্ট জেনারেটর

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

গ্রেডিয়েন্ট জেনারেটর সরাসরি ব্রাউজারে CSS গ্রেডিয়েন্ট স্ট্রিং তৈরি করে — কোনো লাইব্রেরি, সার্ভার বা আপলোড নেই। একটি হাতে লেখা ফাংশন আপনার color stop ও কোণ থেকে রিয়েল টাইমে সঠিক linear-gradient, radial-gradient বা conic-gradient সিনট্যাক্স তৈরি করে, তারপর আপনার বাছাই করা আউটপুট লক্ষ্যের জন্য ফলাফল ফরম্যাট করে।

1. 1
   stop ও দিক কনফিগার করুন

   ব্রাউজারের নেটিভ কালার পিকার দিয়ে 2 থেকে 6টি color stop সেট করুন, তারপর range স্লাইডার দিয়ে প্রতিটি stop-কে 0–100% অক্ষে বসান। linear ও conic গ্রেডিয়েন্টে একটি কোণও (0–360°) বাছেন; radial গ্রেডিয়েন্টে আকৃতি (ellipse বা circle) এবং গ্রেডিয়েন্ট কতদূর ছড়াবে তা নিয়ন্ত্রণকারী size কীওয়ার্ড বাছেন।
2. 2
   buildCss গ্রেডিয়েন্ট স্ট্রিং তৈরি করে

   প্রতিটি পরিবর্তনে একটি লোকাল buildCss ফাংশন আপনার প্যারামিটারগুলো জুড়ে সঠিক CSS ফাংশন কল তৈরি করে — যেমন linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%)। কোনো লাইব্রেরি নেই; স্ট্রিংটি সাধারণ JavaScript টেমপ্লেট যুক্তি দিয়ে তৈরি হয়ে সরাসরি stop অ্যারে থেকে জোড়া হয়।
3. 3
   ইনলাইন স্টাইলে লাইভ প্রিভিউ

   তৈরি গ্রেডিয়েন্ট স্ট্রিং সরাসরি একটি div এলিমেন্টে ইনলাইন background স্টাইল হিসেবে প্রয়োগ হয়, তাই ব্রাউজারের নিজস্ব CSS ইঞ্জিন প্রিভিউ আঁকে। কোনো canvas বা ছবি নেই — যা দেখেন তা আক্ষরিক অর্থেই প্রয়োগ করা CSS প্রপার্টি।
4. 4
   চারটি ফরম্যাটে কপি-উপযোগী আউটপুট

   একটি ফরম্যাট সিলেক্টর একই গ্রেডিয়েন্ট স্ট্রিংকে সাধারণ CSS (background: ...), সলিড ফলব্যাকসহ CSS ব্লক, Tailwind arbitrary-value ক্লাস বা SCSS ভেরিয়েবল ঘোষণায় রূপান্তর করে। Copy-তে ক্লিক করলে navigator.clipboard.writeText দিয়ে বাছাই করা আউটপুট ক্লিপবোর্ডে যায়। বর্তমান গ্রেডিয়েন্ট URL hash-এও এনকোড হয়, তাই বুকমার্ক বা শেয়ার করতে পারেন।

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