রৈখিক-গ্রেডিয়েন্ট() ব্যাকগ্রাউন্ড ইমেজ হিসাবে লিনিয়ার গ্রেডিয়েন্টকে সংজ্ঞায়িত করতে ব্যবহৃত হয় -
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. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. 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>৷ আউটপুট
