Linear Gradient - Repeating

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

HTML file: Displayed by browser:
<style>
#grad1 {
   height: 200px;
   background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
     /* For Safari 5.1 to 6.0 */
   background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
     /* For Opera 11.1 to 12.0 */
   background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
     /* For Firefox 3.6 to 15 */
   background: repeating-linear-gradient(red, yellow 10%, green 20%);
     /* Standard syntax (must be last) */
}
</style>
<body>
<div id="grad1">This is a Repeating Linear Gradient</div>
</body>
This is a Repeating Linear Gradient

Note: Internet Explorer 9 and earlier versions do not support gradients.

Radial Gradient - Evenly Spaced Color Stops

Note: Internet Explorer 9 and earlier versions do not support gradients.

Radial Gradient - Differently Spaced Color Stops

Example

A radial gradient with differently spaced color stops:

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6-12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6-15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax */
}
Try it yourself »
------------------EXAMPLE-----------------------

Radial Gradient - Differently Spaced Color Stops

Note: Internet Explorer 9 and earlier versions do not support gradients.

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

Example

A radial gradient with the shape of a circle:

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
}
Try it yourself »
------------------EXAMPLE-----------------------

Radial Gradient - Shapes

Ellipse (this is default):

Circle:

Note: Internet Explorer 9 and earlier versions do not support gradients.

Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:

Example

A radial gradient with different size keywords:

#grad1 {
  /* Safari 5.1 to 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* For Opera 11.6 to 12.0 */
  background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* For Firefox 3.6 to 15 */
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* Standard syntax */
  background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
}

#grad2 {
  /* Safari 5.1 to 6.0 */
  background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Opera 11.6 to 12.0 */
  background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* For Firefox 3.6 to 15 */
  background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Standard syntax */
  background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);
}
Try it yourself »
------------------EXAMPLE-----------------------

Radial Gradients - Use of different size keywords

closest-side:

farthest-side:

closest-corner:

farthest-corner (this is default):

Note: Internet Explorer 9 and earlier versions do not support gradients.

Repeating a radial-gradient

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

Example

A repeating radial gradient:

#grad {
  /* For Safari 5.1 to 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Opera 11.6 to 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Firefox 3.6 to 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Standard syntax */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Try it yourself »
------------------EXAMPLE-----------------------

Radial Gradients - Use of different size keywords

closest-side:

farthest-side:

closest-corner:

farthest-corner (this is default):

Note: Internet Explorer 9 and earlier versions do not support gradients.

------------------TEST-----------------------

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »  Exercise 6 »  Exercise 7 »

------------------------END OF NEW STUFF----------------------->
Back button Table of Contents Next button