কিভাবে CSS দিয়ে গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড কালার সেট করবেন

CSS এর সাথে একটি গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড কালার সেট করতে, আপনাকে linear-gradient() যোগ করতে হবে আপনার background ফাংশন সম্পত্তি

আসুন একটি সাধারণ বক্স ক্লাস তৈরি করি এবং এটি চেষ্টা করে দেখি:

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background: linear-gradient(yellow, red);
}

ফলাফলঃ

আপনি রৈখিক গ্রেডিয়েন্ট ফাংশনের ভিতরে পুনরায় সাজিয়ে কোন রঙগুলি শুরু এবং শেষ করতে পারেন তা পরিবর্তন করতে পারেন:

/* Starting red, finishing yellow */
 background: linear-gradient(red, yellow);

রৈখিক-গ্রেডিয়েন্ট কোণ/টিল্ট পরিবর্তন করুন

আপনি উপরের উদাহরণগুলিতে দেখতে পাচ্ছেন, linear-gradient() ফাংশন ডিফল্টভাবে উপরে থেকে নীচের গ্রেডিয়েন্ট তৈরি করে। আপনি সহজেই গ্রেডিয়েন্ট কোণ পরিবর্তন করতে পারেন যা আপনি চান।

উদাহরণস্বরূপ, এখানে একটি রৈখিক গ্রেডিয়েন্ট রয়েছে যা 45 ডিগ্রি কাত:

/* Starting yellow, finishing red */
linear-gradient(45deg, yellow, red);

ফলাফল:

আপনি 0 থেকে 360 পর্যন্ত যেকোনো ডিগ্রী ব্যবহার করতে পারেন।

আপনার গ্রেডিয়েন্টের জন্য HEX, RGB, বা RGBa ব্যবহার করুন

আপনি আপনার লিনিয়ার-গ্রেডিয়েন্টের জন্য HEX, RGB, এবং RGBa রঙের মডেল ব্যবহার করতে পারেন। RGBa হল সবচেয়ে নমনীয় যে এটি আপনাকে আপনার লিনিয়ার গ্রেডিয়েন্টে একটি আলফা চ্যানেল (স্বচ্ছতার জন্য) ব্যবহার করতে দেয়।

আপনি নীচে দেখতে পাচ্ছেন, RGBa ব্যবহার করার সময় আপনি আপনার গ্রেডিয়েন্টের সাথে যতটা চান সৃজনশীল হতে পারেন:

উপরের লিনিয়ার-গ্রেডিয়েন্ট উদাহরণের জন্য এখানে CSS:

{
    background: linear-gradient(217deg, 
    rgba(255,0,0,.8), 
    rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, 
    rgba(0,255,0,.8), 
    rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, 
    rgba(0,0,255,.8), 
    rgba(0,0,255,0) 70.71%);
}