Home >> css >> CSS3 Gradients

CSS3 Gradients

This feature enables you to create a gradient from one color to another without the use of any image.

Using CSS3 Gradients

It provides a flexible solution for generating smooth transitions between two or more colors. Earlier, for achieving such effects, one had to use the images. With CSS3 gradients, you can minimise the download time and save bandwidth usage. Furthermore, you can scale the elements with gradients up or down to any extent without losing the quality; also, the output will render much faster because the browser generates it.

Linear and radial are two styles in which gradients are available.

Creating CSS3 Linear Gradients

For creating a linear gradient, at least two-color stops must be defined. However, more complex gradient effects can be created by defining more color stops. Color stops are those colors that you want to render smooth transitions among. A developer can also set a starting point and a direction (or an angle) along which the gradient effect is applied. You can give the basic syntax to create the linear gradients using the keywords:

Example :

linear-gradient(direction, color-stop1, color-stop2, ...)

Linear Gradient - Top to Bottom

The example below will create a linear gradient from top to bottom. This is the default.

Example :

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, yellow);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(red, yellow);
    /* Standard syntax */
    background: linear-gradient(red, yellow);
}

Linear Gradient - Left to Right

The example below will create a linear gradient from left to right.

Example :

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left, red, yellow);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(left, red, yellow);
    /* Standard syntax */
    background: linear-gradient(to right, red, yellow);
}

Linear Gradient - Diagonal

A gradient can also be created along the diagonal direction. The example below will create a linear gradient from the bottom left corner to the top right corner of the box of the element.

Example :

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(bottom left, red, yellow);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(bottom left, red, yellow);
    /* Standard syntax */
    background: linear-gradient(to top right, red, yellow);
}

Setting Direction of Linear Gradients Using Angles

In case you want more control over the gradient's direction, you can set the angle instead of the predefined keywords. The 0deg angle creates a bottom to top gradient, and positive angles denote clockwise rotation, which means the angle 90deg makes a left to the right gradient. The basic syntax to create the linear gradients using angle can be given with:

The example below will create a linear gradient from left to right using an angle.

Example:

linear-gradient(angle, color-stop1, color-stop2, ...)

Example :

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(0deg, red, yellow);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(0deg, red, yellow);
    /* Standard syntax */
    background: linear-gradient(90deg, red, yellow);
}

Creating Linear Gradients Using Multiple Color Stops

Gradients can also be created for more than two colors. The example below shows you how to create a linear gradient using multiple color stops. Here all colors are evenly spaced.

Example :

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, yellow, lime);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(red, yellow, lime);
    /* Standard syntax */
    background: linear-gradient(red, yellow, lime);
}

Setting the Location Color Stops

The color stops are points along the gradient line that will have a particular color at that location. You can specify the location of a color stop either as a percentage or as an absolute length. To achieve the desired effect, you may specify as many color stops as you like.

Example :

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(red, yellow 30%, lime 60%);
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(red, yellow 30%, lime 60%);
    /* Standard syntax */
    background: linear-gradient(red, yellow 30%, lime 60%);
}

Note: When you set the color-stops location as a percentage, 0% denotes the starting point, while 100% denotes the ending point. However, values can be used outside of that range, i.e., before 0% or after 100%, to get the effect you want.

Repeating the Linear Gradients

The repeating-linear-gradient() function can be used to repeat linear gradients.

Example :

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: white;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
    /* For Internet Explorer 10 */
    background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
    /* Standard syntax */
    background: repeating-linear-gradient(black, white 10%, lime 20%);
}

Creating CSS3 Radial Gradients

The color emerges from a single point in a radial gradient and smoothly spreads outward in a circular or elliptical shape instead of fading from one color to another in a single direction, as in the case of linear gradients. You can give the basic syntax of creating a radial gradient with:

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

The radial-gradient() function arguments have the following meaning:

position — It specifies the starting point of the gradient and can be specified in units (em, px, or percentages) or keywords (bottom, left, etc.).
shape — It specifies the shape of the gradient's ending shape. It can be an ellipse or circle.
size — It specifies the size of the gradient's ending shape. The farthest side is the default. The example mentioned below shows you how to create a radial gradient with evenly spaced color stops.

Example:

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-radial-gradient(red, yellow, lime);
    /* For Internet Explorer 10 */
    background: -ms-radial-gradient(red, yellow, lime);
    /* Standard syntax */
    background: radial-gradient(red, yellow, lime);
}

Setting the Shape of Radial Gradients

You can use the shape argument of the radial-gradient() function to define the radial gradient's ending shape. It can take the value ellipse or circle. Here's is an example:

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-radial-gradient(circle, red, yellow, lime);
    /* For Internet Explorer 10 */
    background: -ms-radial-gradient(circle, red, yellow, lime);
    /* Standard syntax */
    background: radial-gradient(circle, red, yellow, lime);
}

Note: If you omit or do not specify the shape argument, the ending shape defaults to a circle in case the size is a single length; otherwise, an ellipse.

Setting the Size of Radial Gradients

You can define the size argument of the radial-gradient() function to determine the size of the gradient's ending shape. You can set the size using units or the keywords: farthest-side, closest-side, farthest-corner, closest-corner.

Example:

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: red;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
    /* For Internet Explorer 10 */
    background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
    /* Standard syntax */
    background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}

Repeating the Radial Gradients

The radial gradients can also be repeated using the repeating-radial-gradient() function.

Example:

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: white;
    /* For Safari 5.1 to 6.0 */
    background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
    /* For Internet Explorer 10 */
    background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
    /* Standard syntax */
    background: repeating-radial-gradient(black, white 10%, lime 20%);
}

CSS3 Transparency and Gradients

Transparency is also supported by CSS3 gradients. It can be used to create fading effects on background images while stacking multiple backgrounds.

Example :

.gradient {
    /* Fallback for browsers that don't support gradients */
    background: url("images/sky.jpg");
    /* For Safari 5.1 to 6.0 */
    background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
    /* For Internet Explorer 10 */
    background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
    /* Standard syntax */
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
}

-Advertisement-