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