How to Make Gradient Image Using CSS

There is a function in CSS which creates a CSS gradient image that can be used anywhere an image URL is required. You can use this gradient image with including background-image, border-image and can also used on list-style properties. With this property, you can create two types of gradient image Linear and Radial. In linear gradient image, color moves from on point to another point i.e. from top to bottom, left to right etc. where as in radial gradient image, color moves from center point to outer in a circular form. In this post I am explaining the methods to create these two types of gradient images using gradient property in CSS.

How to Create Linear Gradient Image Using CSS

You can create linear gradient image with specifying type of gradient linear with start point, end point and stop point. On start point and end point you can specify the values left top, right top, left bottom, right bottom etc. The color-stop takes two arguments, the first of which is a number between 0 and 1 or 0 or percentage indicating the location of stop and the second argument is the color at that stop as a standard color value. Values from and to are used to specify starting color and ending color, from(color-value) and to (color-value) are shorthand or color-stop(0, color-value) and color-stop(1, color-value). Following are the syntax and examples for creating linear gradient images.

Syntax:

gradient: linear, start_point, end_point, stop1 [….stopN]

Top To Bottom Linear Gradient

Here is an example to display linear gradient from top to bottom. It starts from green transaction to blue.

#linear1 {
height: 80px;
background: -webkit-linear-gradient(green, blue);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue);
/* For Firefox 3.6 to 15 */
background: linear-gradient(green, blue);
/* Standard syntax */
}

Left To Right Linear Gradient

Here is an example to display linear gradient from left to right. It starts from red transaction to green.

#linear2 {
height:80px;
background: -webkit-linear-gradient(left, red , green);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, green);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, green);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , green);
/* Standard syntax */
}

Diagonal Linear Gradient

Here is an example to display diagonal linear gradient starts at top left and
goes to bottom right. It starts from brown transaction to blue.

#linear3 {
height:80px;
background: -webkit-linear-gradient(left top, brown , blue);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, brown, blue);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, brown, blue);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, brown , blue);
/* Standard syntax */
}

Linear Gradient with Multiple Color Stops 

Here is an example to display linear gradient goes from top to bottom with multiple color stops. It starts from red transaction to green and gray.

#linear4 {
height:80px;
background: -webkit-linear-gradient(red, green, gray);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green, gray);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, gray);
/* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, gray);
/* Standard syntax */
}

Linear Gradient with Specified Arbitrary Stops 

Here is an example to display linear gradient goes from left top to right top with specified arbitrary stops. It starts from #F00 transaction to #00F.

#linear5 {
height:80px; 
background: -webkit-gradient(linear, left top, right top, from(#F00), color-stop(0.25, #1a82f7), color-stop(0.5, #00F), color-stop(0.75, #1a82f7), to(#00F)); /* Safari 4-5, Chrome 1-9 */
background: -webkit-linear-gradient(left, #00F, #1a82f7,#00F, #1a82f7, #00F);
/* Safari 5.1+, Chrome 10+ */
background: -moz-linear-gradient(left, #00F, #1a82f7, #00F, #1a82f7, #2F2727);
/* Firefox 3.6+ */
background: -ms-linear-gradient(left, #00F, #1a82f7, #00F, #1a82f7, #00F);
/* IE 10 */
background: -o-linear-gradient(left, #00F, #1a82f7, #00F, #1a82f7, #00F);
/* Opera 11.10+ */ }

Demo:

How to Create Radial Gradient Image Using CSS

You can create radial gradient image with specifying type of gradient radial with inner_center, inner_radius, outer_center, outer_radius and color-stop. On inner_center and outer_center you can specify the values as number, which are coordinate points of inner and outer center. You can specify the values as numbers for length of inner_radius and outer_radius. Following are the syntax and examples for creating radial gradient images.

Syntax:

gradient: radial, inner_center, inner_radius, outer_center, outer_radius, stop1 […stopN]

 

Radial Gradient With Evenly Spaced Color Stops

Here is an example to display radial gradient with evenly spaced color stops. It starts from pink transaction to brown and blue.

#radial1 {
  height:80px;
  background: -webkit-radial-gradient(pink, brown, blue);
  /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(pink, brown, blue);
  /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(pink, brown, blue);
  /* For Firefox 3.6 to 15 */
  background: radial-gradient(pink, brown, blue);
  /* Standard syntax */}

Radial Gradient With Differently Spaced Color Stops

Here is an example to display radial gradient with differently spaced color stops. It starts from green transaction to pink and blue.

 #radial2 {
  height:80px;
  background: -webkit-radial-gradient(green 15%, pink 25%, blue 60%);
  /* Safari 5.1-6.0 */
  background: -o-radial-gradient(green 15%, pink 25%, blue 60%);
  /* For Opera 11.6-12.0 */
  background: -moz-radial-gradient(green 15%, pink 25%, blue 60%);
  /* For Firefox 3.6-15 */
  background: radial-gradient(green 15%, pink 25%, blue 60%);
  /* Standard syntax */}

Radial Gradient With Shape Of Circle

Here is an example to display radial gradient with shape of circle. It starts from red transaction to pink and green.

#radial3 {
  height:80px;
  background: -webkit-radial-gradient(circle, red, pink, green);
  /* Safari */
  background: -o-radial-gradient(circle, red, pink, green);
  /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, red, pink, green);
  /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, red, pink, green);
  /* Standard syntax */
}

Repeating Radial Gradient 

Here is an example to display repeating radial gradient. It starts from green transaction to pink and green.

#radial4 {
  height:80px;
  /* For Safari 5.1 to 6.0 */
  background: -webkit-repeating-radial-gradient(green, pink 10%, green 15%);
  /* For Opera 11.6 to 12.0 */
  background: -o-repeating-radial-gradient(green, pink 10%, green 15%);
  /* For Firefox 3.6 to 15 */
  background: -moz-repeating-radial-gradient(green, pink 10%, green 15%);
  /* Standard syntax */
  background: repeating-radial-gradient(green, pink 10%, green 15%);
} 

Central Radial Gradient

Here is an example to display central radial gradient. It starts from #00AAFF transaction to #FFAA00.

#radial5 {
height:80px;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#00AAFF), to(#FFAA00));
 /* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #00AAFF, #FFAA00);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #00AAFF, #FFAA00);
/* IE 10 */
background: -ms-radial-gradient(circle, #00AAFF, #FFAA00);
}

Demo: