লিনিয়ার গ্রেডিয়েন্ট রঙকে সরাসরি লাইনে বিন্যস্ত করে, রেডিয়াল গ্রেডিয়েন্ট কেন্দ্র থেকে বাইরে দিকে ছড়িয়ে দেয়।
উদাহরণ: লিনিয়ার ও রেডিয়াল গ্রেডিয়েন্ট
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.linearGradient { height: 100px; width: 300px; background-image: linear-gradient(rgb(255, 0, 200), yellow); }
.radialGradient { height: 200px; width: 200px; background-image: radial-gradient(rgb(255, 0, 200), yellow); }
</style>
</head>
<body>
<h2>লিনিয়ার গ্রেডিয়েন্ট</h2>
<div class="linearGradient"></div>
<h2>রেডিয়াল গ্রেডিয়েন্ট</h2>
<div class="radialGradient"></div>
</body>
</html>
কোড ব্যাখ্যা
- linear-gradient(color1, color2): ডিফল্টভাবে top to bottom (180deg)।
- radial-gradient(color1, color2): কেন্দ্রে color1, বাইরে color2। ডিফল্ট আকার ellipse।
রেডিয়াল গ্রেডিয়েন্ট কাস্টমাইজেশন
`radial-gradient(circle at center, red, yellow)`, `radial-gradient(closest-side, red, yellow)` ইত্যাদি ব্যবহার করে আকার, পজিশন, সাইজ কন্ট্রোল করা যায়।
