CSS - linear-gradient()

CSS function linear-gradient() is useful in creating an image that contains a progressive transition of two or more colors along a straight line. The resultant image is a special image, of <gradient> datatype.

In order to create a basic linear gradient, you just need two colors, which are known as color stops. You must have minimum two, but can have more than two as well.

Overview

  • A linear-gradient has no intrinsic dimensions, which means an image with not a preferred size or aspect ratio.

  • The size of the image will match the size of the element it applies to.

  • The <gradient> datatype can be used only where <image>s are used.

  • The linear-gradient() function can not be used with <color> datatype and properties such as background-color.

  • In order to create a linear-gradient that repeats itself, you need to use the CSS function repeating-linear-gradient().

Possible Values

The function linear-gradient() can have following values as arguments:

  • <side-or-corner>:

    • Determines the starting point of the gradient.

    • Contains the word to and upto two keyterms, ie., one indicates the horizontal side (left or right) and the other indicates the vertical side (top or bottom).

    • Order of the side keyterms can be anything.

    • When no value is specified, the default value set is to bottom.

    • Equivalent values to to top, to bottom, to left, and to right are 0deg, 180deg, 270deg, and 90deg respectively.

    • The <angle> value increases in a clockwise direction.

  • <linear-color-stop>: Consists of a color stop's <color> values, along with one or two optional values of stop positions. The stop position value can be either <percentage> or a <length> value.

  • <color-hint>: Determines the gradient progression between adjacent color stops. When no value specified, midpoint of the color transition is the midpoint between two color stops.

Syntax

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

CSS linear-gradient() - Composition

The linear gradient is the progressive transition of two or more colors along a straight line or axis, which is the gradient line. The two or more color stops points, shows the transition of colors progressively. Refer the figure given below, it shows two distinct points on the gradient line, showing the starting point and the ending point, that intersects with the gradient line.

Starting point is the beginning of the first color stop and the ending point is where the last color ends. The corners near the starting point and the ending point shows the same color as these points.

linear-gradient composition

CSS linear-gradient() - Basic Example

In order to create a basic linear gradient, you just need two colors, which are known as color stops. You must have minimum two, but can have more than two as well. Let us see an example:

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
   }

   .basic-linear {
      background: linear-gradient(red, yellow);
   }
</style>
</head>
<body>
   <h1>Basic linear gradient</h1>
   <div class="basic-linear"></div>
</body>
</html>

CSS linear-gradient() - To Top Right

Gradients can be created such that they run diagonally, from one corner to the other.

For example, if you want the gradient axis to start from left corner and go to the top right corner, the function should contain "to top right", as parameter.

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
   }

   .linear-diagonal {
      background: linear-gradient(to top right, red, yellow);
   }
</style>
</head>
<body>
   <h1>direction to top right</h1>
   <div class="linear-diagonal"></div>
</body>
</html>

CSS linear-gradient() - Angle Value

An angle can also be provided to the gradient for defining the direction. Let us see an example, where different angles are mentioned:

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      display: inline-block;
      text-align: center;
      margin: 5px;
   }

   .linear-0deg {
      background: linear-gradient(0deg, red, yellow);
   }

   .linear-45deg {
      background: linear-gradient(45deg, red, yellow);
   }

   .linear-60deg {
      background: linear-gradient(60deg, red, yellow);
   }

   .linear-90deg {
      background: linear-gradient(90deg, red, yellow);
   }

   .linear-180deg {
      background: linear-gradient(180deg, red, yellow);
   }

   .linear-minus90deg {
      background: linear-gradient(-90deg, red, yellow);
   }
</style>
</head>
<body>
   <div class="linear-0deg">0deg</div>
   <div class="linear-45deg">45deg</div>
   <div class="linear-60deg">60deg</div>
   <div class="linear-90deg">90deg</div>
   <div class="linear-180deg">180deg</div>
   <div class="linear-minus90deg">-90deg</div>
</body>
</html>

CSS linear-gradient() - Multi Color

Minimum two colors are required to create a gradient, but you need not limit yourself while selecting the number of colors. The colors are evenly spaced along the gradient, by default. Let us see an example:

<html>
<head>
<style>
   div {
      height: 100px;
      width: 100px;
      display: inline-block;
      text-align: center;
      margin: 5px;
   }

   .linear-more-than-two {
      background: linear-gradient(blue, magenta, red,yellow, orange);
   }
</style>
</head>
<body>
   <div class="linear-more-than-two"></div>
</body>
</html>

For more examples of linear-gradient(), click here.

Advertisements