Gradients

In this tutorial you will learn how to set different gradients using CSS.

A gradient is a color fill that blends smoothly from one color to another. Introduced in CSS 3, the gradient functions can be used anywhere an image is required according to specification, but they are mainly used together with the background or background-image properties to create a background gradient.

Linear Gradients

A linear gradient is one that gradually transitions between colors over the length of a straight line connecting two points. At its simplest, a linear gradient changes proportionally between two colors along the full length of the line.

Example: Try It

body{
background-image: linear-gradient(white, yellow);
}

Setting Gradient Direction

The angle for the gradient can be set by using the keyword to, followed by the destination in which the gradient will end: top, right, bottom, left, or any combination thereof.

Example: Try It

background-image:linear-gradient(to bottom left, yellow, white);

More precise angles can be specified by using the deg unit, with 0 deg being the same as to top. The degrees proceed clockwise, and negative angles are allowed.

Example:

linear-gradient(0deg, gray, black); /* to top */
linear-gradient(90deg, gray, black); /* to right */
linear-gradient(180deg, gray, black); /* to bottom */
linear-gradient(-90deg, gray, black); /* to left */

Adding Extra Color-Stop Values

Additional color stops can be added between the starting and ending colors. Any color stop can be followed by a stop position specified as either a percentage or a length value. If no stop position is specified, the colors are evenly distributed.

Example:

linear-gradient(gray, white 25%, black);

Repeating Linear Gradients

Rather than create only a single gradient from one side of an element to another, you can repeat the same gradient until the element is filled using the repeating-linear-gradient() function. This function accepts the same fundamental set of values as linear-gradient except that a length or percentage value is required for the final color-stop.

Example:

background-image: repeating-linear-gradient(to left, black, white, black 25%);

Radial Gradients

A radial gradient is a gradual transition between colors that moves out from a central point in all directions. At its simplest, a radial gradient gradually changes between two colors in a circular or elliptical shape.

Example:

background-image: radial-gradient(white, black);

Like linear-gradient(), more than two color stops are allowed and they can optionally be followed by a length or percentage value, indicating the stop position of the color.

Example:

radial-gradient(black 25%, white, black 75%);

Changing origin of a radial gradient:

The origin of a radial gradient is centered by default. It can be changed by specifying the position of the gradient’s origin with the keyword at followed by a position specified in the same way as for the background-position property. The horizontal position is specified first, optionally followed by the vertical position. The position can be set with keywords (left, center, right + top, center, and bottom), length values, percentage values, or a combination thereof.

Example:

radial-gradient(at right bottom, gray, black);