CSS3 Gradients

Previous Page Next Page

Using CSS3 Gradients

The CSS3 gradient feature provides a versatile solution for crafting seamless color transitions. Previously, achieving such effects required using images. By utilizing CSS3 gradients, you can decrease download times and conserve bandwidth. Elements with gradients can be scaled without losing quality, and they render faster since they're generated by the browser.

Gradients come in two styles: linear and radial.

Creating CSS3 Linear Gradients

To craft a linear gradient, you need to specify at least two color stops. For more intricate gradient effects, additional color stops can be defined. Color stops determine the colors for smooth transitions. You can also designate a starting point and a direction (or angle) for applying the gradient effect. The basic syntax for creating linear gradients using keywords is:

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

Linear Gradient - Top to Bottom

The following example generates a linear gradient from top to bottom, which is the default behavior.

Example

Try this code »

.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 following example creates a linear gradient from left to right.

Example

Try this code »

.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

You can also generate a gradient along the diagonal direction. The following example produces a linear gradient from the bottom left corner to the top right corner of the element's box.

Example

Try this code »

.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

If you desire more control over the gradient's direction, you can specify an angle instead of using predefined keywords. An angle of 0deg creates a bottom-to-top gradient, and positive angles denote clockwise rotation; hence, 90deg results in a left-to-right gradient. The basic syntax for creating linear gradients using angles is:

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

The following example generates a linear gradient from left to right using an angle.

Example

Try this code »

.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

You can create gradients with more than two colors. This example demonstrates how to create a linear gradient with multiple evenly spaced color stops.

Example

Try this code »

.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

Color stops mark specific points along the gradient line with a particular color. You can specify the location of a color stop as a percentage or an absolute length. Add as many color stops as needed to achieve your desired effect.

Example

Try this code »

.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 setting color-stop locations as percentages, 0% marks the starting point, and 100% marks the ending point. You can use values beyond this range for different effects.

Repeating the Linear Gradients

You can repeat linear gradients using the repeating-linear-gradient() function.

Example

Try this code »

.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

In radial gradients, colors emanate from a central point and spread outward in a circular or elliptical pattern. Unlike linear gradients, they don't fade from one color to another in a single direction. The basic syntax for creating a radial gradient is:

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

The arguments of the radial-gradient() function are interpreted as follows:

position — Defines the starting point of the gradient, in units (px, em, or percentages) or keywords (left, bottom, etc).
shape — Specifies the shape of the gradient's end. It can be a circle or an ellipse.
size — Specifies the size of the gradient's end shape. The default is farthest-side.

This example demonstrates creating a radial gradient with evenly spaced color stops.

Example

Try this code »

.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

The shape argument of the radial-gradient() function is used to specify the ending shape of the radial gradient. It can be either circle or ellipse. Here's an example:

Example

Try this code »

.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 the shape argument is omitted or not specified, the ending shape defaults to a circle if the size is a single length, otherwise, it's an ellipse.

Setting the Size of Radial Gradients

The size argument of the radial-gradient() function defines the size of the gradient's ending shape. You can specify it using units or keywords like closest-side, farthest-side, closest-corner, farthest-corner.

Example

Try this code »

.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

You can repeat radial gradients using the repeating-radial-gradient() function.

Example

Try this code »

.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

CSS3 gradients support transparency, enabling you to create fading effects on background images when using multiple backgrounds.

Example

Try this code »

.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");
}

Previous Page Next Page