CSS3 Gradients

CSS3 gradients allow you to display smooth transitions between two or more specified colors.

Previously, you had to use images to achieve these effects. However, by using CSS3 gradients, you can reduce download time and bandwidth usage. Additionally, elements with gradient effects look better when zoomed in, as the gradients are generated by the browser.

CSS3 defines two types of gradients:

• Linear Gradients - Down/Up/Left/Right/Diagonal
• Radial Gradients - Defined by their center

Linear gradient-related properties: background-image.

Online tool for linear gradients: Gradient Online Tool.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Note: IE8 and earlier versions of IE do not support this property.

CSS3 Linear Gradients

To create a linear gradient, you must define at least two color stops. Color stops are the colors you want to transition between. You can also set a starting point and a direction (or an angle).

Example of Linear Gradient:

Syntax

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

Linear Gradient - Top to Bottom (default)

The following example demonstrates a linear gradient starting from the top. It starts with red and transitions to blue:

Example

Linear gradient from top to bottom:

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

Linear Gradient - Left to Right

The following example demonstrates a linear gradient starting from the left. It starts with red and transitions to yellow:

Example

Linear gradient from left to right:

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

Linear Gradient - Diagonal

You can create a diagonal gradient by specifying the horizontal and vertical starting positions.

The following example demonstrates a linear gradient starting from the top left (to the bottom right). It starts with red and transitions to yellow:

Example

Linear gradient from top left to bottom right:

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

Using Angles

If you want more control over the direction of the gradient, you can define an angle instead of predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).

Syntax

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

The angle is the angle between the horizontal line and the gradient line, calculated in the counter-clockwise direction. In other words, 0deg creates a gradient from bottom to top, and 90deg creates a gradient from left to right.

However, note that many browsers (Chrome, Safari, Firefox, etc.) use an older standard where 0deg creates a gradient from left to right, and 90deg creates a gradient from bottom to top. The conversion formula is 90 - x = y, where x is the standard angle and y is the non-standard angle.

The following example demonstrates how to use an angle in a linear gradient:

Example

Linear gradient with a specified angle:

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

Using Multiple Color Stops

The following example demonstrates how to set multiple color stops:

Example

Linear gradient from top to bottom with multiple color stops:

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

The following example demonstrates how to create a linear gradient with rainbow colors and text:

Example

#grad {
  /* Standard syntax */

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

Using Transparency

CSS3 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, which defines the transparency of the color: 0 indicates fully transparent, and 1 indicates fully opaque.

The following example demonstrates a linear gradient that starts from the left. It begins fully transparent and transitions to fully opaque red:

Example

Linear gradient from left to right with transparency:

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

Repeating Linear Gradient

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

Example

A repeating linear gradient:

#grad {
  /* Standard syntax */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS3 Radial Gradient

Radial gradients are defined by their center.

To create a radial gradient, you must also define at least two color stops. The color stops are the colors you want to render smooth transitions among. You can also specify the gradient's center, shape (either circle or ellipse), and size. By default, the gradient's center is at the center (indicated by "center"), the shape is an ellipse, and the size is farthest-corner (indicating to the farthest corner).

Examples of Radial Gradients:

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Radial Gradient - Evenly Spaced Color Stops (by default)

Example

Radial gradient with evenly spaced color stops:

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

Radial Gradient - Unevenly Spaced Color Stops

Example

Radial gradient with unevenly spaced color stops:

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Setting Shape

The shape parameter defines the shape. It can have values of circle or ellipse. Where circle indicates a circular shape and ellipse indicates an elliptical shape. The default value is ellipse.

Example

Radial gradient with a circular shape:

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

Using Different Size Keywords

The size parameter defines the size of the gradient. It can have one of the following four values:

• closest-side
• farthest-side
• closest-corner
• farthest-corner

Example

Radial gradients with different size keywords:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Repeating Radial Gradient

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

Example

A repeating radial gradient:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}