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 gradient is 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 property: 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 render smooth transitions among. You can also set a start 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, transitioning 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, transitioning 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 make a diagonal gradient by specifying 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, transitioning 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 the 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 specified as the angle between the horizontal line and the gradient line, calculated counterclockwise. 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 fade-out effects.

To add transparency, we use the rgba() function to define the color nodes. 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 with full transparency and gradually 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 define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also specify the gradient's center, shape (either circular or elliptical), and size. By default, the gradient's center is at the center, the shape is an ellipse, and the size is farthest-corner (indicating to the farthest corner).

Radial Gradient Example:

Syntax

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

Radial Gradient with Evenly Spaced Color Stops (Default)

Example

Radial gradient with evenly spaced color stops:

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

Radial Gradient with Unevenly Spaced Color Stops

Example

Radial gradient with unevenly spaced color stops:

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

Setting the Shape

The shape parameter defines the shape. It can be either 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 be one of the following four values:

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

Example

Radial gradient 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%);
}