The linear-gradient() is used to define linear gradient as background image −
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Above, set the starting point and direction, with that color stopes to render smooth transitions.
Example
Let us now see an example to implement linear-gradient() −
<!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>Output
Example
<!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>Output
