লিনিয়ার গ্রেডিয়েন্টে কালার স্টপের পজিশন পরসেন্টেজ বা আBsলুট দৈর্ঘ্যে (px, em) নির্দিষ্ট করা যায়।
উদাহরণ: কালার স্টপ লোকেশন
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.even {
height: 100px;
background-image: linear-gradient( rgb(61, 255, 2), rgb(0, 174, 255), rgb(255, 29, 29) );
}
.uneven {
height: 100px;
background-image: linear-gradient(
rgb(61, 255, 2) 40%,
rgb(0, 174, 255) 80%,
rgb(255, 29, 29) 20%
);
}
</style>
</head>
<body>
<h1>লিনিয়ার গ্রেডিয়েন্ট লোকেশন কালার স্টপ</h1>
<h3>সমান ব্যবধান (Evenly Spaced)</h3>
<div class="even"></div>
<h3>বিষম ব্যবধান (Unevenly Spaced)</h3>
<div class="uneven"></div>
</body>
</html>
কোড ব্যাখ্যা
- .even: কোনো পজিশন না দিয়ে — ব্রাউজার স্বয়ংক্রিয়ভাবে সমান ব্যবধান করে।
- .uneven: ৪০% এ হয়লো, ৮০% এ নীল, ২০% এ লাল — অর্ডার ব-igন করলে ওভারল্যাপ হয়, ইন্টারেস্টিং ইফেক্ট তৈরি হয়।
নোট
কালার স্টপের পজিশন ক্রমবর্ধমান না হলে (যেমন ৪০%, ৮০%, ২০%) ব্রাউজার অটোমেটিক্যালি সাজিয়ে দেয়, কিন্তু অপ্রত্যাশিত ফলাফল দিতে পারে।
