Linear GradientLinear GradientTo create a linear gradient in CSS, you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect. The syntax to create an Linear Gradient is:
On the left is an image of a Linear Gradient with a top-to-bottom direction. Images take download time and bandwidth usage, while CSS does not (to the same extent). In the demonstration below, we use CSS coding to display Linear Gradients, rather than images:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
#grad { background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, blue); /* Standard syntax */ } #grad1 { height: 200px; background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, blue); /* Standard syntax (must be last) */ } </style> <body> <p>The default of a CSS3 Linear Gradient is Top to Bottom, which starts at the top and ends at the bottom. This example starts red, transitioning to blue:</p> <div id="grad" style="color:white;">This has no height set on this element.</div> <br /> <div id="grad1">This element is set to be 200 pixels high.</div> </body> |
The default of a CSS3 Linear Gradient is Top to Bottom, which starts at the top and ends at the bottom. This example starts red, transitioning to blue: This has no height set on this element.
This element is set to be 200 pixels high.
|
Note: Internet Explorer 9 and earlier versions do not support gradients.
