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.

Linear Top Gradient
Linear Top Gradient
CSS


#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.

Linear Left Gradient
Linear Left Gradient
CSS


#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.

Linear Diagonal Gradient
Linear Diagonal Gradient
CSS


#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 )

Radial Even Gradient
Radial Even Gradient
CSS


#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 )

Radial Different Space Gradient
Radial Different Space Gradient
CSS


#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

HTML & CSS

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.


 

Leave a Reply

Your email address will not be published.