The linear-gradient() Function

The CSS linear-gradient() function creates an image which represents a linear gradient of colors. The image is not a CSS <color> but an image with no intrinsic dimensions. The gradient's concrete size will match the size of the element it applies to.

Syntax for linear-gradient()
CSSlinear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> ), where <side-or-corner> is "[left | right] || [top | bottom]", <color-stop-list> is <color-stop>{2,}, and <color-stop> is "<color> [ <percentage> | <length> ]?"


  • Note the required "to" keyword before <side-or-corner>.

Recommended Links

Search Engine Links (for more information)

Help us improve this page: Suggest a link or noteReport a problem