CSS গ্রেডিয়েন্ট জেনারেটর

CSS গ্রেডিয়েন্ট জেনারেটর কী?

CSS গ্রেডিয়েন্ট জেনারেটর হলো সেই সব ওয়েব ডিজাইনার ও ফ্রন্ট-এন্ড ডেভেলপারের জন্য একটি বিনামূল্যের অনলাইন টুল যাদের হাতে সিনট্যাক্স না লিখে দ্রুত একটি গ্রেডিয়েন্ট দরকার। একটি লিনিয়ার, রেডিয়াল বা কনিক গ্রেডিয়েন্ট বেছে নিন, লিনিয়ার ও কনিক ধরনের জন্য কোণ ডিগ্রিতে সেট করুন, এবং প্রতিটি রঙের স্টপকে একটি HEX রঙ ও একটি অবস্থানের শতাংশ দিয়ে নির্ধারণ করুন। সম্পাদনার সময় একটি লাইভ প্রিভিউ ফলাফল দেখায় এবং মিল-করা CSS background নিয়ম সঙ্গে সঙ্গে আপডেট হয় যাতে আপনি সরাসরি স্টাইলশিটে কপি করতে পারেন। বোতাম, হিরো ব্যাকগ্রাউন্ড, কার্ড ও ওভারলে ডিজাইন করতে এটি ব্যবহার করুন, অথবা linear-gradient(), radial-gradient() ও conic-gradient() ফাংশন কীভাবে কাজ করে তা শিখতে।

CSS গ্রেডিয়েন্ট জেনারেটর কীভাবে ব্যবহার করবেন

1. গ্রেডিয়েন্টের ধরন বেছে নিন: লিনিয়ার, রেডিয়াল বা কনিক।
2. লিনিয়ার বা কনিক গ্রেডিয়েন্টের জন্য কোণ ডিগ্রিতে সেট করুন (0-360); রেডিয়াল একটি কেন্দ্রস্থ বৃত্ত ব্যবহার করে এবং কোণ উপেক্ষা করে।
3. প্রতিটি রঙের স্টপ সম্পাদনা করুন: একটি HEX রঙ টাইপ করুন বা বেছে নিন এবং তার অবস্থান শতাংশ হিসেবে সেট করুন (0-100)।
4. আরেকটি রঙ যোগ করতে স্টপ যোগ করুন-এ ক্লিক করুন, অথবা একটি স্টপ মুছতে ট্র্যাশ আইকনে (অন্তত দুটি স্টপ রাখা হয়)।
5. লাইভ প্রিভিউ বক্স আপডেট হতে দেখুন, তারপর কপি বোতাম দিয়ে তৈরি হওয়া CSS background নিয়ম কপি করুন।

উদাহরণ

লিনিয়ার, 90deg, #4f86f7 অবস্থানে 0% এবং #9333ea অবস্থানে 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

রেডিয়াল, স্টপ #ffffff 0%, #4f86f7 50%, #1e3a8a 100%

background: radial-gradient(circle, #ffffff 0%, #4f86f7 50%, #1e3a8a 100%);

সচরাচর জিজ্ঞাসিত প্রশ্ন

কোন কোন গ্রেডিয়েন্টের ধরন সমর্থিত?

তিনটি: linear-gradient (ডিগ্রিতে একটি কোণ সহ), radial-gradient (একটি কেন্দ্রস্থ বৃত্ত), এবং conic-gradient (একটি শুরুর কোণ সহ)। টাইপ টগল দিয়ে এদের মধ্যে স্যুইচ করুন এবং CSS সঙ্গে সঙ্গে আপডেট হয়।

রঙের স্টপ ও অবস্থান কীভাবে কাজ করে?

প্রতিটি স্টপে একটি রঙ এবং 0 থেকে 100 পর্যন্ত একটি অবস্থানের শতাংশ থাকে। স্টপগুলো তালিকায় যে ক্রমে দেখা যায় ঠিক সেই ক্রমেই CSS-এ লেখা হয়, যেমনভাবে ব্রাউজার সেগুলো ব্যাখ্যা করে, তাই আপনি ক্রম সরাসরি নিয়ন্ত্রণ করেন। আপনি স্টপ যোগ করুন দিয়ে স্টপ যোগ করতে পারেন এবং সর্বনিম্ন দুটি পর্যন্ত মুছতে পারেন।

HEX টাইপ করার বদলে আমি কি রঙ দৃশ্যত বেছে নিতে পারি?

হ্যাঁ। আপনার ব্রাউজারের নিজস্ব কালার পিকার খুলতে প্রতিটি স্টপের পাশের ছোট কালার চিপে ক্লিক করুন, অথবা রঙের ক্ষেত্রে সরাসরি #4f86f7 এর মতো একটি HEX মান টাইপ করুন। আপনি পরিবর্তন করার সাথে সাথে প্রিভিউ ও CSS আপডেট হয়।

রেডিয়াল গ্রেডিয়েন্টে কোণের ক্ষেত্রটি কেন উধাও হয়ে যায়?

এখানে একটি রেডিয়াল গ্রেডিয়েন্ট একটি কেন্দ্রস্থ বৃত্ত হিসেবে আঁকা হয়, যা কোণ ব্যবহার করে না, তাই কোণের ক্ষেত্রটি কেবল লিনিয়ার ও কনিক ধরনের জন্য দেখানো হয় যেখানে এটি দিক পরিবর্তন করে।

আমার রঙ বা CSS কি কোথাও আপলোড হয়?

না। গ্রেডিয়েন্টটি সম্পূর্ণরূপে আপনার ব্রাউজারে স্থানীয় স্ট্রিং ও রঙের গণিত দিয়ে তৈরি হয় — কোনো রঙ, CSS বা সেটিং কখনও সার্ভারে পাঠানো হয় না, তাই এটি অফলাইনে কাজ করে এবং আপনার কাজ ব্যক্তিগত রাখে।