linear-gradient() function - HTML CSS CSS

HTML CSS examples for CSS:Function

  1. HOME
  2. HTML CSS
  3. CSS
  4. Function

Definition and Usage

The linear-gradient() function creates a linear gradient of colors.

CSS Syntax

ValueDescription
directionDefines a starting point and a direction or an angle along with the gradient effect.
color-stop1, color-stop2,... Color stops to render.

The following example shows a linear gradient that starts at the top. It starts red, transitioning to yellow, then to blue:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {<!-- w ww.ja  v a2  s.  com-->
    height: 200px;
    background: -webkit-linear-gradient(red,yellow,blue,black,pink); /* Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red,yellow,blue,black,pink); /* Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red,yellow,blue,black,pink); /* Firefox 3.6 to 15 */
    background: linear-gradient(red,yellow,blue,black,pink); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

Related Tutorials