CSS | linear-gradient() Function
The linear-gradient() function is an inbuilt function in CSS which is used to set the linear gradient as the background image.
Syntax:
background-image: linear-gradient( direction, color1, color2, ... )
Parameters: This function accepts one direction parameter and many color parameters which are listed below:
- direction: This parameter is used to define the starting point and direction along with the gradient effect.
- color1, color2, …: This parameter is used to hold the color value followed by its optional stop position.
Below examples illustrate the linear-gradient() function in CSS:
Example 1:
<!DOCTYPE html> <html> <head> <title>linear-gradient function</title> <style> .gradient { height: 100px; background-image: linear-gradient(green, yellow, blue); Text-align:center; padding-top:40px; font-size:40px; color:white; font-weight:bold; } h2 { text-align:center; } </style> </head> <body> <h2>linear-gradient: Top to Bottom property</h1> <div class="gradient">GeeksforGeeks</div> </body> </html> |
chevron_right
filter_none
Output:
Example 2:
<!DOCTYPE html> <html> <head> <title>linear-gradient function</title> <style> .gradient { height: 100px; background-image: linear-gradient(to left, green, yellow, blue); Text-align:center; padding-top:40px; font-size:40px; color:white; font-weight:bold; } h2 { text-align:center; } </style> </head> <body> <h2>linear-gradient: Right to Left property</h1> <div class="gradient">GeeksforGeeks</div> </body> </html> |
chevron_right
filter_none
Output:
Recommended Posts:
- How to Check a Function is a Generator Function or not using JavaScript ?
- How to call a function that return another function in JavaScript ?
- How to get the function name from within that function using JavaScript ?
- How to get the function name inside a function in PHP ?
- p5.js | arc() Function
- PHP | dir() Function
- PHP | exp() Function
- PHP | Ds\Set contains() Function
- CSS | url() Function
- D3.js | d3.map.set() Function
- CSS | var() Function
- PHP | key() Function
- PHP | pos() Function
- PHP | Ds\Map get() Function
- D3.js | d3.set.has() Function
- PHP | end() Function
- PHP | max( ) Function
- PHP | min( ) Function
- PHP | Ds\Set first() Function
- D3.js | d3.hsl() Function
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
