#<gradient>

The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors.

#Syntax

The <gradient> data type is defined with one of the function types listed below.

#Linear gradient

Linear gradients transition colors progressively along an imaginary line. They are generated with the linear-gradient() function.

/* A gradient tilted 45 degrees, starting blue and finishing red */
linear-gradient(45deg, blue, red);
/* A gradient going from the bottom right to the top left corner, starting blue and finishing red */
linear-gradient(to left top, blue, red);
/* Color stop: A gradient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red */
linear-gradient(0deg, blue, green 40%, red);

#Formal Syntax

linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop> [ , <color-stop> ]+ )

#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.
  The values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg, respectively. The other values are translated into an angle.

• <angle> The gradient line's angle of direction. A value of 0deg is equivalent to to top; increasing values rotate clockwise from there.

• <color-stop> A color-stop's <color> value, followed by one stop position, a <percentage> value along the gradient's axis.

#Radial Gradient

Radial gradients transition colors progressively from a center point (origin). They are generated with the radial-gradient() function.

radial-gradient(#e66465, #9198e5);

radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);

radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);

radial-gradient(ellipse at top, #e66465, transparent);

#Formal Syntax

radial-gradient(
  [ [ circle || <length> ]                         [ at <position> ]? , |
    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
    [ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
    at <position> ,
  ]?
  <color-stop> [ , <color-stop> ]+
)

#Values

• <position> The position of the gradient, interpreted in the same way as background-position or transform-origin. If unspecified, it defaults to center.

• <ending-shape> The gradient's ending-shape. The value can be circle (meaning that the gradient's shape is a circle with a constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse.

• <size> Determines the size of the gradient's ending shape.
  If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments.

  Keyword	Description
  closest-side	The gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
  closest-corner	The gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center.
  farthest-side	Similar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
  farthest-corner	The default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center.

• <color-stop> Same as linear-gradient

#Compatibility

LCD tables only load in the browser