CSS linear-gradient() Function
The linear-gradient() function is an inbuilt function in CSS that 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.
The below examples illustrate the linear-gradient() function in CSS:
Example 1: In this example, The .gradient element applies a linear gradient background from green to yellow to blue, with centered text on top.
html
<!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</ h2 > < div class = "gradient" >w3wiki</ div > </ body > </ html > |
Output:
Example 2: The .gradient element applies a linear gradient background from right to left, with colors transitioning from green to yellow to blue.
html
<!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 </ h2 > < div class = "gradient" > w3wiki </ div > </ body > </ html > |
Output:
Supported Browser:
- Google Chrome 26
- Edge 12
- Microsoft Edge 12
- Firefox 16
- Opera 12.1
- Safari 7
Contact Us