CSS3 Gradients

March 13, 2015
by Inaam Hussain

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
<!DOCTYPE html>
<html>
    <head>
        <style>
            #grad-style-top {
                height: 200px;
                width:100%;
                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 */
            }
            #grad-style-left {
                height: 200px;
                width:100%;
                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 */
            }
            #grad-style-diagonal {
                height: 400px;
                width:100%;
                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 */
            }
            #grad-style-even-rad {
                height: 200px;
                width:100%;
                 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 */
            }
            #grad-style-diff-rad {
                height: 200px;
                width:100%;
                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 */
            }
        </style>
    </head>
    <body>
        <h3>Linear Gradient - ( Top to Bottom )</h3>
        <div id="grad-style-top"></div>
        <h3>Linear Gradient - ( Left to Right )</h3>
        <div id="grad-style-left"></div>
        <h3>Linear Gradient - ( Diagonal )</h3>
        <div id="grad-style-diagonal"></div>
        <h3>Radial Gradient - ( Evenly Spaced Color Stops )</h3>
        <div id="grad-style-even-rad"></div>
        <h3>Radial Gradient - ( Different Spaced Color Stops )</h3>
        <div id="grad-style-diff-rad"></div>
        <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
    </body>
</html>

 

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

Leave a Comment