रैखिक ढाल () का उपयोग रैखिक ढाल को पृष्ठभूमि छवि के रूप में परिभाषित करने के लिए किया जाता है -
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> आउटपुट
