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

Read more

CSS3 Linear Gradients

Linear Gradient

Gradients allows you to add a simple and smooth transitions between specified colors (the above example describes you a liner gradient in the form of a rainbow).

Early you have to use images to do so, but now CSS3 let you this very easily.
Using CSS3 gradients, you can reduce you bandwidth usage too. In addition, CSS3 gradients looks better when zoomed out, because gradients are generated by the browser itself.

In CSS3 there are, two types of Gradients:
1. Linear Gradients (from top to bottom / from left to right) 
2. Radial Gradients (defined by their center)

Here we will just talk about Linear Gradients. For Radial Gradients, you can reed next post.

---

CSS3 Linear Gradients

To create a Linear Gradients you must at least define two color stops. Color stops are the colors in which you want to create a transitional look.

Syntax:

CSS3 gradients are being generated using the following syntax:

background: linear-gradient ( direction, color-stop1, color-stop2, ... ); 

---

Linear Gradient - Top to Bottom (its default) 

This code generates a gradient which starts from and ends at bottom, transitioning between red to blue:

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

Linear Gradients - Left to Right

This is an example of linear gradients that starts from left: 

#grad {
     background: -webkit-linear-gradient(left, red , blue);
     background: -o-linear-gradient(right, red, blue);
     background: -moz-linear-gradient(right, red, blue);
     background: linear-gradient(to right, red , blue);
     } Output

Linear Gradients - Diagonal 

CSS3 allows you to create DIAGONAL linear gradients too.

To create a Diagonal Linear Gradient, you have to specify both ending and starting point and two colors.

Below is the example demonstrating a linear gradient:

#grad {
     background: -webkit-linear-gradient(left top, blue, yellow);
     background: -o-linear-gradient(bottom right, blue, yellow);
     background: -moz-linear-gradient(bottom right, blue, yellow);
     background: linear-gradient(to bottom right, blue, yellow);
     } Output

---

Using Angles 

We can also specify an angular transition in Linear Gradients. Angles can be used to control the direction of an linear gradient. 

Below example demonstrates a gradient which is created by using an angle of 45deg. 

#grad {
     background: -webkit-linear-gradient(45deg, red, blue);
     background: -o-linear-gradient(45deg, red, blue);
     background: -moz-linear-gradient(45deg, red, blue);
     background: linear-gradient(45deg, red, blue);
     } Output

---

Using Multiple Color Stops

The CSS3 gradients are not limited to only two colors in a gradients, you can use as many colors as you want. 

For this you just need to define all of the colors you want to show in a gradients.

The below code explains how to create a rainbow looking gradient with some text in it:

#grad {
     background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
     background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
     background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
     background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
     } Output

---

Using Transparency 

Well, to create a nice looking gradient, CSS3 gives you another thing, Transparency.! 

You can create a fading effect using transparency.

To add transparency we use rgba() to define color stops. In rgba() the last parameter indicates the transparency. Which can be a value from 0 to 1. 

0 indicates full transparency and 1 indicates full color (no transparency). 

below example defines a gradient with some transparent effect:

#grad1 {
     height: 200px;
     background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
     background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1));
     background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1));
     background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
     } output

Read more