CSS-এ গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড কালার সেট করতে linear-gradient() ফাংশনটি background প্রপার্টিতে যোগ করতে হয়।
বেসিক উদাহরণ
<div class="box"></div>.box { width: 200px; height: 200px; background: linear-gradient(yellow, red); }রঙের ক্রম পরিবর্তন করতে ফাংশনের ভিতরে রঙগুলো রি-অর্ডার করুন:
/* লাল থেকে পীলা */ background: linear-gradient(red, yellow);গ্রেডিয়েন্ট কোণ/টিল্ট পরিবর্তন
ডিফল্টভাবে linear-gradient() টপ-টু-বটম গ্রেডিয়েন্ট তৈরি করে। কোণ পরিবর্তন করতে:
/* ৪৫ ডিগ্রি টিল্ট, পীলা থেকে লাল */ linear-gradient(45deg, yellow, red);০ থেকে ৩৬০ ডিগ্রি যেকোনো মান ব্যবহার করা যায়।
HEX, RGB বা RGBA ব্যবহার করুন
গ্রেডিয়েন্টে HEX, RGB, এবং RGBA সব রঙ মডেল কাজ করে। RGBA সবচেয়ে ফ্লেক্সিবল কারণ এতে Alpha চ্যানেল (ট্রান্সপেরেন্সি) ব্যবহার করা যায়।
RGBA দিয়ে ক্রিয়েটিভ গ্রেডিয়েন্ট উদাহরণ:
{ 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%); }