লিনিয়ার গ্রেডিয়েন্টে একাধিক কালার স্টপ যোগ করে রেনবো বা মাল্টি-কালার গ্রেডিয়েন্ট তৈরি করা যায়।
উদাহরণ: একাধিক কালার স্টপ
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
div { height: 200px; width: 100%; display: inline-block; margin-right: 10px; }
.linearGradient { background-image: linear-gradient(to left, orange, blue, green, pink, yellow); }
</style>
</head>
<body>
<h1>একাধিক কালার স্টপ দিয়ে লিনিয়ার গ্রেডিয়েন্ট</h1>
<div class="linearGradient"></div>
</body>
</html>
কোড ব্যাখ্যা
- linear-gradient(to left, orange, blue, green, pink, yellow): ৫টি রঙ স্বয়ংক্রিয়ভাবে সমান ব্যবধানে বিন্যস্ত হবে।
- to left: গ্রেডিয়েন্ট ডান থেকে বামে যাবে।
কালার স্টপ পজিশনিং
`linear-gradient(to left, orange 20%, blue 40%, green 60%, pink 80%, yellow)`처럼 পরসেন্টেজ দিয়ে নির্দিষ্ট পজিশন ফিক্স করা যায়।
