গ্রেডিয়েন্ট ডিরেকশন কীওয়ার্ড (to left, to top right) না দিয়ে এ্যাঙ্গেল (ডিগ্রি) দিয়ে আরও সুনির্দিষ্টভাবে কন্ট্রোল করা যায়।
উদাহরণ: এ্যাঙ্গেল দিয়ে গ্রেডিয়েন্ট ডিরেকশন
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
div { height: 200px; width: 300px; display: inline-block; margin-right: 10px; }
.linearGradient { background-image: linear-gradient(90deg, rgb(255, 0, 200), yellow); }
.linearGradient1 { background-image: linear-gradient(-90deg, rgb(255, 0, 200), yellow); }
</style>
</head>
<body>
<h1>এ্যাঙ্গেল দিয়ে লিনিয়ার গ্রেডিয়েন্ট ডিরেকশন</h1>
<div class="linearGradient"></div>
<div class="linearGradient1"></div>
</body>
</html>
কোড ব্যাখ্যা
- 90deg: বাম থেকে ডান (to right সমান)।
- -90deg: ডান থেকে বাম (to left সমান)।
- 0deg: নিচ থেকে উপরে (to top)।
- 180deg: উপরে থেকে নিচে (to bottom — ডিফল্ট)।
এ্যাঙ্গেল রেফারেন্স
CSS গ্রেডিয়েন্টে ০ ডিগ্রি = উপরের দিকে। ধনাত্মক এ্যাঙ্গেল ঘড়ির কাঁটায় ঘুরায়।