CSS3 Radial Gradients

A radial gradient is defined by its center.
To create a radial gradient you have to specify at least two color stops.
Below is a simple looking Radial Gradient, created using CSS3:

Syntax:

backgroud: radial-gradient(shape size at position, start-color, ..., end-color) ;

Radial Gradient - Evenly spaced color stops (default)

By, default, color stops are evenly spaced in Radial Gradients.

Below code snippet creates an radial gradients: 

#grad {
        background: -webkit-radial-gradient(red, green, blue);
        background: -o-radial-gradient(red, green, blue);
        background: -moz-radial-gradient(red, green, blue);
        background: radial-gradient(red, green, blue);
        } Output

Radial Gradient - Differently spaced color stops

You can also specify a custom space for every color in radial gradient.

Look at this example: 

#grad {
     background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
     background: -o-radial-gradient(red 5%, green 15%, blue 60%);
     background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
     background: radial-gradient(red 5%, green 15%, blue 60%);
     } Output

Define Shape

You can also specify different space in radial gradient. 

shape parameter, takes as values, either circle or eclipse. Default value is eclipse. 

The below code snippet creates a radial gradient of a circle shape:

#grad {
     background: -webkit-radial-gradient(circle, red, yellow, green);
     background: -o-radial-gradient(circle, red, yellow, green);
     background: -moz-radial-gradient(circle, red, yellow, green);
     background: radial-gradient(circle, red, yellow, green);
     } Output

---

Use different Size Keywords

Size keywords, define size for radial gradients. 

It can take any of these four values:

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

Example:

#grad1 {
     background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
     background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
     background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
     background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
     } 
 #grad2 {
     background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
     background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
     background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
     background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);
     } Output

---

Repeating Radial Gradient 

repeating-radial-gradient is used to repeat a radial gradient:

Example:

#grad {
     background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
     background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
     background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
     background: repeating-radial-gradient(red, yellow 10%, green 15%);
     } Output

• email
• facebook
• linkedin
• twitter
• reddit
• google+

Muhammad Arslan Aslam

I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.

Get Free Email Updates to your Inbox!

• Rss
• Twitter
• FaceBook
• Google +