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

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

CSS গ্রেডিয়েন্ট জেনারেটর হলো ব্রাউজারের ভেতরে চলা একটি বিনামূল্যের টুল, সেই সব ওয়েব ডিজাইনার ও ফ্রন্ট-এন্ড ডেভেলপারের জন্য যারা হাতে সিনট্যাক্স লেখার বদলে দৃশ্যত গ্রেডিয়েন্ট তৈরি করতে চান। লিনিয়ার, রেডিয়াল বা কনিক বেছে নিন — ঐচ্ছিক পুনরাবৃত্ত ভ্যারিয়েন্টসহ — তারপর টেনে সরানো যায় এমন প্রিভিউ বারে বা HEX রঙ ও অবস্থান ফিল্ডসহ প্রতি-স্টপ সারিতে কালার স্টপ সম্পাদনা করুন। রেডিয়াল গ্রেডিয়েন্ট বৃত্ত/উপবৃত্ত আকৃতি, একটি আকার কীওয়ার্ড (closest-side, closest-corner, farthest-side, farthest-corner) এবং at X% Y% কেন্দ্র দেয়, আর কনিক একটি শুরুর কোণ ও কেন্দ্র নেয়। আপনি একাধিক গ্রেডিয়েন্ট স্তর কমা দিয়ে আলাদা করে একটি ব্যাকগ্রাউন্ডে সাজাতে, এলোমেলো গ্রেডিয়েন্ট তৈরি করতে, প্রস্তুত প্যালেট প্রয়োগ করতে, প্রতিটি স্টপের হিউ ঘোরাতে, এবং পেস্ট-করার-উপযোগী background নিয়ম কপি করতে পারেন।

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

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

উদাহরণ

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

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

রেডিয়াল, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

স্তর 1 লিনিয়ার 90deg; স্তর 2 রেডিয়াল circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

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

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

লিনিয়ার, রেডিয়াল ও কনিক গ্রেডিয়েন্ট, প্রতিটির একটি ঐচ্ছিক পুনরাবৃত্ত ভ্যারিয়েন্টসহ। রেডিয়াল বৃত্ত/উপবৃত্ত আকৃতি, একটি আকার কীওয়ার্ড (closest-side, closest-corner, farthest-side, farthest-corner) এবং at X% Y% কেন্দ্র যোগ করে; কনিক একটি শুরুর কোণ ও কেন্দ্র যোগ করে। আপনি একাধিক স্তরও একটি ব্যাকগ্রাউন্ডে সাজাতে পারেন।

টেনে সরানো স্টপ বার কীভাবে কাজ করে?

যেকোনো স্টপ বার বরাবর টেনে তার অবস্থান বদলান, বারের খালি অংশে ক্লিক করে একটি ইন্টারপোলেটেড রঙসহ নতুন স্টপ যোগ করুন, এবং স্টপ মুছতে তার উপর ডাবল-ক্লিক করুন (অন্তত দুটি রাখা হয়)। প্রতিটি স্টপের বারের নিচে HEX রঙ ও অবস্থান ফিল্ডও থাকে।

আমি কি আমার স্ক্রিন থেকে রঙ নিতে পারি?

হ্যাঁ, যেসব ব্রাউজার EyeDropper API সমর্থন করে সেখানে। উপলব্ধ থাকলে প্রতিটি স্টপের পাশে একটি আইড্রপার বোতাম দেখা যায়; ক্লিক করে স্ক্রিনের যেকোনো পিক্সেল বাছুন। আপনি সবসময় HEX মান টাইপ করতে বা নিজস্ব কালার চিপ ব্যবহার করতে পারেন।

এলোমেলো, প্যালেট ও হিউ ঘোরানো কী করে?

এলোমেলো সক্রিয় স্তরকে একটি নতুন এলোমেলো গ্রেডিয়েন্ট দিয়ে বদলে দেয়, প্যালেট সক্রিয় স্তরের স্টপগুলোকে একটি বাছাই করা রঙ-সেট দিয়ে বদলে দেয়, এবং হিউ ঘোরান প্রতিটি স্তরের প্রতিটি স্টপের হিউ একবারে সরিয়ে দেয়। এগুলো কেবল ক্লিক করলেই গ্রেডিয়েন্ট বদলায়।

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

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