CSS3 Gradients

In CSS3 Gradients we can easily display transition between 2 or more colors.

Earlier we have to use images for showing this type of effects. But now it’s easy and fast using CSS3 Gradients instead of images.

Type Of Gradients

• Linear Gradients ( Can set gradients down/up/left/right/diagonally)
• Radial Gradients (defined by their center)

 

Linear Gradients

For creating linear gradients we have to define atleat 2 color stops. also we can set stating point (i.e: down/up/left/right/diagonally) with gradient effects.

Syntax

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

Linear Gradient – ( Top to Bottom )

This below is the example of gradient start from top. in this we have not specified direction so it will take default top to bottom.


#grad-style {
background: linear-gradient(#1FA67A, #FFFFFF); /* Standard syntax */
background: -webkit-linear-gradient(#1FA67A, #FFFFFF); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(#1FA67A, #FFFFFF); /* For Firefox 3.6 to 15 */
background: -o-linear-gradient(#1FA67A, #FFFFFF); /* For Opera 11.1 to 12.0 */
}

 

Linear Gradient – ( Left to Right )

This below is the example of gradient start from left or right.


#grad-style {
background: linear-gradient(to right, #1FA67A, #FFFFFF); /* Standard syntax */
background: -webkit-linear-gradient(left, #1FA67A, #FFFFFF); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(right, #1FA67A, #FFFFFF); /* For Firefox 3.6 to 15 */
background: -o-linear-gradient(right, #1FA67A, #FFFFFF); /* For Opera 11.1 to 12.0 */
}


 

Linear Gradient – ( Diagonal )

This below is the example of gradient start from diagonally left top or right bottom etc.


#grad-style {
background: linear-gradient(to bottom right, #1FA67A, #FFFFFF); /* Standard syntax */
background: -webkit-linear-gradient(left top, #1FA67A, #FFFFFF); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(bottom right, #1FA67A, #FFFFFF); /* For Firefox 3.6 to 15 */
background: -o-linear-gradient(bottom right, #1FA67A, #FFFFFF); /* For Opera 11.1 to 12.0 */
}


 

Note : We can also use angle instead of direction. (ex: background: linear-gradient(120deg, #1FA67A, #FFFFFF);)

 

Radial Gradients

Radial gradient define by it’s center.

Syntax

background: radial-gradient(shape size at position, start-color, …, last-color);

Radial Gradient – ( Evenly Spaced Color Stops )


#grad-style {
background: radial-gradient(#1FA67A, #FFFFFF, #3a5795); /* Standard syntax */
background: -webkit-radial-gradient(#1FA67A, #FFFFFF, #3a5795); /* Safari 5.1 to 6.0 */
background: -moz-radial-gradient(#1FA67A, #FFFFFF, #3a5795); /* For Firefox 3.6 to 15 */
background: -o-radial-gradient(#1FA67A, #FFFFFF, #3a5795); /* For Opera 11.6 to 12.0 */
}


 

Radial Gradient – ( Different Spaced Color Stops )


#grad-style {
background: radial-gradient(#1FA67A 10%, #FFFFFF 20%, #3a5795 35%); /* Standard syntax */
background: -webkit-radial-gradient(#1FA67A 10%, #FFFFFF 20%, #3a5795 35%); /* Safari 5.1 to 6.0 */
background: -moz-radial-gradient(#1FA67A 10%, #FFFFFF 20%, #3a5795 35%); /* For Firefox 3.6 to 15 */
background: -o-radial-gradient(#1FA67A 10%, #FFFFFF 20%, #3a5795 35%); /* For Opera 11.6 to 12.0 */
}


 

Full HTML & CSS Code

Linear Gradient - ( Top to Bottom )

Linear Gradient - ( Left to Right )

Linear Gradient - ( Diagonal )

Radial Gradient - ( Evenly Spaced Color Stops )

Radial Gradient - ( Different Spaced Color Stops )

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