Teach with us

CSS linear-gradient() Function

CSSWeb DevelopmentFront End Technology

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() −

 Live Demo

<!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

 Live Demo

<!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

raja
AmitDiwan
Updated on 27-Dec-2019 10:04:24

Previous Page Print Page Next Page  
Advertisements