CSS linear-gradient() ফাংশন ব্যবহার

linear-gradient() ফাংশন লিনিয়ার গ্রেডিয়েন্টকে ব্যাকগ্রাউন্ড ইমেজ হিসেবে সংজ্ঞায়িত করতে ব্যবহৃত হয়।

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

এখানে শুরু বিন্দু ও দিক, এবং রঙ স্টপগুলো সেট করে স্মুথ ট্রানজিশন তৈরি করা হয়।

উদাহরণ ১: বাম নিচে থেকে ডান উপরে গ্রেডিয়েন্ট

<!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify: inter-word;    color: white;    background-image: linear-gradient(to bottom right, red, blue);    position: absolute;    right: 90px; } </style> </head> <body> <h2>Demo Heading</h2> <div>This is demo text... </div> </body> </html>

আউটপুট

উদাহরণ ২: রেইনবো গ্রেডিয়েন্ট (বাম থেকে ডান)

<!DOCTYPE html> <html> <head> <style> body {    background-image: linear-gradient(to right, yellow, orange, yellow, green, blue, indigo, violet); } .demo {    text-decoration: overline;    text-decoration-color: yellow;    font-size: 1.3em; } </style> </head> <body> <h1>Examination Details</h1> <p class="demo">Exam on 20th December.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>

আউটপুট

দিক (Direction) নির্দেশনা

• to top, to bottom, to left, to right
• to top right, to bottom left ইত্যাদি
• 45deg, 135deg — কোণ ব্যবহার করলেও হয়

রঙ স্টপ (Color Stops)

রঙের পাশে পজিশন (%) দিয়ে ট্রানজিশন পয়েন্ট নিয়ন্ত্রণ করা যায়: linear-gradient(red 0%, blue 50%, green 100%)।

নোট: পুরনো ব্রাউজারlerde -webkit-linear-gradient, -moz-linear-gradient প্রিফিক্স দরকার ছিল। আধুনিক ব্রাউজারগুলো প্রিফিক্স ছাড়া কাজ করে।