CSS Creating Gradients (Linear Gradients)

Gradient Backgrounds

CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines three types of gradients:

• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)
• Conic Gradients (rotated around a center point)

CSS Linear Gradients

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Direction - Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts blue, transitioning to light green:

top to bottom (default)

Example

#grad {
background-image: linear-gradient(blue, lightgreen);
}

Direction - Left to Right

The following example shows a linear gradient that starts from the left. It starts blue, transitioning to lightgreen:

left to right

Example

#grad {
background-image: linear-gradient(to right, blue , lightgreen);
}

Direction - Diagonal

You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.

The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts blue, transitioning to lightgreeen:

top left to bottom right

Example

#grad {
background-image: linear-gradient(to bottom right, blue, lightgreen);
}

Using Angles

If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.). A value of 0deg is equivalent to "to top". A value of 90deg is equivalent to "to right". A value of 180deg is equivalent to "to bottom".

Syntax

background-image: linear-gradient(angle, color-stop1, color-stop2);

The following example shows how to use angles on linear gradients:

180deg

Example

#grad {
background-image: linear-gradient(180deg, blue, lightgreen);
}

Using Multiple Color Stops

The following example shows a linear gradient (from top to bottom) with multiple color stops:

Example

#grad {
background-image: linear-gradient(red, yellow, green);
}

The following example shows how to create a linear gradient (from left to right) with the color of the rainbow and some text:

Rainbow Background

Example

#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

Using Transparency

CSS gradients also support transparency, which can be used to create fading effects.

To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).

The following example shows a linear gradient that starts from the left. It starts fully transparent, transitioning to full color blue:

Example

#grad {
background-image: linear-gradient(to right, rgba(0,0,255,0), rgba(0,0,255,1));
}

Repeating a linear-gradient

The repeating-linear-gradient() function is used to repeat linear gradients:

The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

The length of the gradient that repeats is the distance between the first and last color stop. If the first color does not have a color-stop-length, the color-stop-length defaults to 0. With each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient. Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition. This can be altered with repeating the first color again as the last color.

As with any gradient, a repeating linear gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, repeating-linear-gradient() won't work on background-color and other properties that use the <color> data type.

Syntax

/* A repeating gradient tilted 45 degrees,
 starting blue and finishing red, repeating 3 times */
repeating-linear-gradient(45deg, blue, red 33.3%);

/* A repeating gradient going from the bottom right to the top left,
 starting blue and finishing red, repeating every 20px */
repeating-linear-gradient(to left top, blue, red 20px);

/* A gradient going from the bottom to top,
 starting blue, turning green after 40%,
 and finishing red. This gradient doesn't repeat because
 the last color stop defaults to 100% */
repeating-linear-gradient(0deg, blue, green 40%, red);

/* A gradient repeating five times, going from the left to right,
 starting red, turning green, and back to red */
repeating-linear-gradient(to right, red 0%, green 10%, red 20%);

Example

A repeating linear gradient:

#grad {
background-image: repeating-linear-gradient(45deg, blue, lightblue 10%, lightgreen 20%);
}