linear-gradient() CSS Function

Description

The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>.

Syntax

linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  ---------------------------------/ ----------------------------/
    Definition of the gradient line        List of color stops  

where <side-or-corner> = [ left | right ] || [ top | bottom ]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
  and <color-hint> = [ <percentage> | <length> ]

Values

<side-or-corner>The position of the gradient line's starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). The order of the side keywords does not matter. If unspecified, it defaults to 'to bottom'.
<angle>A value that specifies the direction of the gradient. 0deg points upward, and positive angles represent clockwise rotation, so 90deg points toward the right.
<linear-color-stop>A color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis).
<color-hint>The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Example

HTML

<div class="gradient"> Example of the CSS Function Linear Gradient.</div>

CSS

.gradient {

    background: linear-gradient(to right, red, green);

    color: white;

    padding: 30px;

    margin: 5px 30px;

    height: 100px;

    text-align: center

}

Result