CSS3 Gradient | CSS3 Gradient Background

We have often faced the problem to create a unique background with some gradient style. Sometimes we use the image or sometime we use Java Script for gradient background. But with the development of CSS3, now can create a unique gradient background without using an image or any other plugins.

CSS3 gradient background is such term, which allows user to display a smooth transition between two or more than two colors. This can be most useful, if you want to create a light website (as an image can prevent your downloading speed of opening a website).

There are two types of gradient background has been defined in CSS3 specifications:

1) Linear Gradients (Down/Up/Left/Right/Diagonally)
2) Radial Gradients (Defined by their center)

Here is a quick example you can see

Download Gradient Background

Gradient Background

This background has been made with a combination of three colors

Gradient Background Browser Support

The all major browsers support this css3 feature except of IE 9.0 and below version of Internet Explorer. Below you can find a reference of Browser support.

Browser CHROME FIREFOX OPERA SAFARI IE
Version 26 + 16 + 12.1 + 5.1 + 6 7 8 9 10 +
linear-gradient() Y Y Y Y N N N N Y
radial-gradient() Y Y Y Y N N N N Y
repeating-linear-gradient() Y Y Y Y N N N N Y
repeating-radial-gradient() Y Y Y Y N N N N Y

CSS3 Linear Gradients

A linear gradient is a such term of CSS3, which is used to create the image in a linear way with the help of given two or more than two color stops. When we draw the image with given color stops, it shows a smooth transition between the given color stops.

Here is a quick example you can see:

Linear Gradient Background (Top to Bottom)

This div is showing the linear gradient background from top to bottom, which is the default function of it. There are two colors, have been used to create it, which is showing the transitions between the colors.

<!DOCTYPE html>
<html>
 <head>
  <style>
   #grad1
    {
    height:80px;
    padding:20px;
    color:#fff;
    text-align:center;
    background: -webkit-linear-gradient(#00C492 , #A5DF00);
    background: -o-linear-gradient(#00C492 , #A5DF00);
    background: -moz-linear-gradient(#00C492 , #A5DF00);
    background: linear-gradient(#00C492 , #A5DF00);
    }
  </style>
 </head>
 <body>
  <div id="grad1">
   <h3>Linear Gradient Background (Top to Bottom)</h3>
  </div>
 </body>
</html>

Download


Linear Gradient Background (Left to Right)

This div is showing the linear gradient background from left to right. There are two colors, have been used to create it, which is showing the transitions between the colors.

<!DOCTYPE html>
<html>
 <head>
  <style>
   #grad2
    {
    height:80px;
    padding:20px;
    color:#fff;
    text-align:center;
    background: -webkit-linear-gradient(left, #00C492 , #A5DF00);
    background: -o-linear-gradient(left, #00C492 , #A5DF00);
    background: -moz-linear-gradient(left, #00C492 , #A5DF00);
    background: linear-gradient(left, #00C492 , #A5DF00);
    }
  </style>
 </head>
 <body>
  <div id="grad2">
   <h3>Linear Gradient Background (Left to Right)</h3>
  </div>
 </body>
</html>

Download


Linear Gradient Background (Diagonal)

This div is showing the linear gradient background from top left to bottom right, which is known as diagonal gradient. There are two colors, have been used to create it, which is showing the transitions between the colors.

<!DOCTYPE html>
<html>
 <head>
  <style>
   #grad3
    {
    height:80px;
    padding:20px;
    color:#fff;
    text-align:center;
    background: -webkit-linear-gradient(left top, #00C492 , #A5DF00); /* For Safari */
    background: -o-linear-gradient(bottom right, #00C492 , #A5DF00); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #00C492 , #A5DF00); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #00C492 , #A5DF00); /* Standard syntax (must be last) */
    }
  </style>
 </head>
 <body>
  <div id="grad3">
   <h3>Linear Gradient Background (Diagonal)</h3>
  </div>
 </body>
</html>

Download


Linear Gradient Background (Using Angles)

The more controls over linear gradient background can be made using angles in css. An individual can define angles instead of using predefined directions. The angle is defined between the horizontal line and gradient line in clockwise rotation.

Here is a quick example you can see:

Linear Gradient Background (using Angle)

This div is showing the linear gradient background with specified angle. There are two colors, have been used to create it, which is showing the transitions between the colors.

<!DOCTYPE html>
<html>
 <head>
  <style>
   #grad4
    {
    height:80px;
    padding:20px;
    color:#fff;
    text-align:center;
    background: -webkit-linear-gradient(220deg, #00C492 , #A5DF00); /* For Safari */
    background: -o-linear-gradient(220deg, #00C492 , #A5DF00); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(220deg, #00C492 , #A5DF00); /* For Firefox 3.6 to 15 */
    background: linear-gradient(220deg, #00C492 , #A5DF00); /* Standard syntax (must be last) */
    }
  </style>
 </head>
 <body>
  <div id="grad4">
   <h3>Linear Gradient Background (Using Angle)</h3>
  </div>
 </body>
</html>

Download


Linear Gradient Background (Using Transparency)

The more controls over linear gradient background can be made using Transparency in css. An individual can define rgba() value instead of using hex value. This can be used for focusing the background through linear foreground.

Here is a quick example you can see:

Linear Gradient Background (using transparency)

This div is showing the linear gradient background with transparency. There are two colors, have been used to create it, which is showing the transitions between the colors.

<!DOCTYPE html>
<html>
 <head>
  <style>
   #grad5
    {
    height:80px;
    padding:20px;
    color:#fff;
    text-align:center;
    background: -webkit-linear-gradient(left, rgba(0, 196, 146, 0.65) , rgba(165, 223, 0, 0.65)); /* For Safari */
    background: -o-linear-gradient(left, rgba(0, 196, 146, 0.65) , rgba(165, 223, 0, 0.65)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(left, rgba(0, 196, 146, 0.65) , rgba(165, 223, 0, 0.65)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(left, rgba(0, 196, 146, 0.65) , rgba(165, 223, 0, 0.65)); /* Standard syntax (must be last) */
    }
  </style>
 </head>
 <body>
  <div id="grad5">
   <h3>Linear Gradient Background (Using transparency)</h3>
  </div>
 </body>
</html>

Download


Linear Repeating Gradient Background

The more controls over linear gradient background can be made using the linear repeating function also, which repeats the action we pass in the css parameter. This can reduce affords of writing the code again and again.

Here is a quick example you can see:

Linear Repeating Gradient Background

This div is showing the linear repeating gradient background with specified colors. There are two colors, have been used to create it, which is showing the transitions between the colors.

<!DOCTYPE html>
<html>
 <head>
  <style>
   #grad6
    {
    height:80px;
    padding:20px;
    color:#fff;
    text-align:center;
    background: -webkit-repeating-linear-gradient(#00C492 20%, #A5DF00 80%); /* For Safari */
    background: -o-repeating-linear-gradient(#00C492 20%, #A5DF00 80%); /* For Opera 11.1 to 12.0 */
    background: -moz-repeating-linear-gradient(#00C492 20%, #A5DF00 80%); /* For Firefox 3.6 to 15 */
    background: repeating-linear-gradient(#00C492 20%, #A5DF00 80%); /* Standard syntax (must be last) */
    }
  </style>
 </head>
 <body>
  <div id="grad6">
   <h3>Linear Repeating Gradient Background</h3>
  </div>
 </body>
</html>

Download


CSS3 Radial Gradients

A radial gradient is such gradient, which defined by its center. For creating a radial gradient there should be at least two color stops and may be more than that.

Default Specifications:

Here is a quick example you can see:

Radial Gradient Background

<!DOCTYPE html>
<html>
 <head>
  <style>
   #grad7
    {
    height:140px;
    width:180px;
    color:#fff;
    text-align:center;
    background: -webkit-radial-gradient(#00C492, #A5DF00); /* Safari */
    background: -o-radial-gradient(#00C492, #A5DF00); /* For Opera 11.1 to 12.0 */
    background: -moz-radial-gradient(#00C492, #A5DF00); /* For Firefox 3.6 to 15 */
    background: radial-gradient(#00C492, #A5DF00); /* Standard syntax (must be last) */
    }
  </style>
 </head>
 <body>
  <div id="grad7">
   <h3>Radial Gradient Background</h3>
  </div>
 </body>
</html>

Download


Radial Gradient Background (Differently Spaced Color Stops)

<!DOCTYPE html>
<html>
 <head>
  <style>
   #grad8
    {
    height:140px;
    width:180px;
    color:#fff;
    text-align:center;
    background: -webkit-radial-gradient(#00C492 10%, #A5DF00 20%); /* Safari */
    background: -o-radial-gradient(#00C492 10%, #A5DF00 20%); /* For Opera 11.1 to 12.0 */
    background: -moz-radial-gradient(#00C492 10%, #A5DF00 20%); /* For Firefox 3.6 to 15 */
    background: radial-gradient(#00C492 10%, #A5DF00 20%); /* Standard syntax (must be last) */
    }
  </style>
 </head>
 <body>
  <div id="grad8">
   <h3>Radial Gradient Background (Differently Spaced Color Stops)</h3>
  </div>
 </body>
</html>

Download


Radial Gradient Background (Set Shape)

<!DOCTYPE html>
<html>
 <head>
  <style>
   #grad9
    {
    height:140px;
    width:180px;
    color:#fff;
    text-align:center;
    background: -webkit-radial-gradient(circle, #00C492, #A5DF00); /* Safari */
    background: -o-radial-gradient(circle, #00C492, #A5DF00); /* For Opera 11.1 to 12.0 */
    background: -moz-radial-gradient(circle, #00C492, #A5DF00); /* For Firefox 3.6 to 15 */
    background: radial-gradient(circle, #00C492, #A5DF00); /* Standard syntax (must be last) */
    }
  </style>
 </head>
 <body>
  <div id="grad9">
   <h3>Radial Gradient Background (Set Shape)</h3>
  </div>
 </body>
</html>

Download


Using different types of Keywords with Radial Gradient Background

In that size parameter we can define four types of keywords, that are as follows:

Here is a quick example you can see:

Radial Gradient Background (Using keyword closest-side)

Radial Gradient Background (Using keyword farthest-side)

Radial Gradient Background (Using keyword closest-corner)

Radial Gradient Background (Using keyword farthest-corner)

<!DOCTYPE html>
<html>
 <head>
  <style>
#grad10
{
float:left;
height:120px;
width:120px;
padding:5px;
background: -webkit-radial-gradient(40% 65%, closest-side, #00C492, #A5DF00, #ffffff, #000000); /* Safari */
background: -o-radial-gradient(40% 65%, closest-side, #00C492, #A5DF00, #ffffff, #000000); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(40% 65%, closest-side, #00C492, #A5DF00, #ffffff, #000000); /* For Firefox 3.6 to 15 */
background: radial-gradient(40% 65%, closest-side, #00C492, #A5DF00, #ffffff, #000000); /* Standard syntax (must be last) */
    color:#fff;
    text-align:center;
}

#grad11
{
float:left;
height:120px;
width:120px;
padding:5px;
margin-left: 10px;
background: -webkit-radial-gradient(40% 65%, farthest-side, #00C492, #A5DF00, #ffffff, #000000); /* Safari */
background: -o-radial-gradient(40% 65%, farthest-side, #00C492, #A5DF00, #ffffff, #000000); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(40% 65%, farthest-side, #00C492, #A5DF00, #ffffff, #000000); /* For Firefox 3.6 to 15 */
background: radial-gradient(40% 65%, farthest-side, #00C492, #A5DF00, #ffffff, #000000); /* Standard syntax (must be last) */
    color:#fff;
    text-align:center;
}

#grad12
{
float:left;
height:120px;
width:120px;
padding:5px;
margin-left: 10px;
background: -webkit-radial-gradient(40% 65%, closest-corner, #00C492, #A5DF00, #ffffff, #000000); /* Safari */
background: -o-radial-gradient(40% 65%, closest-corner, #00C492, #A5DF00, #ffffff, #000000); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(40% 65%, closest-corner, #00C492, #A5DF00, #ffffff, #000000); /* For Firefox 3.6 to 15 */
background: radial-gradient(40% 65%, closest-corner, #00C492, #A5DF00, #ffffff, #000000); /* Standard syntax (must be last) */
    color:#fff;
    text-align:center;
}

#grad13
{
float:left;
height:120px;
width:120px;
padding:5px;
margin-left: 10px;
background: -webkit-radial-gradient(40% 65%, farthest-corner, #00C492, #A5DF00, #ffffff, #000000); /* Safari */
background: -o-radial-gradient(40% 65%, farthest-corner, #00C492, #A5DF00, #ffffff, #000000); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(40% 65%, farthest-corner, #00C492, #A5DF00, #ffffff, #000000); /* For Firefox 3.6 to 15 */
background: radial-gradient(40% 65%, farthest-corner, #00C492, #A5DF00, #ffffff, #000000); /* Standard syntax (must be last) */
    color:#fff;
    text-align:center;
}
  </style>
 </head>
 <body>
  <div id="grad10">
   <h3>Radial Gradient Background (Using keyword closest-side)</h3>
  </div>
  <div id="grad11">
   <h3>Radial Gradient Background (Using keyword farthest-side)</h3>
  </div>
  <div id="grad12">
   <h3>Radial Gradient Background (Using keyword closest-corner)</h3>
  </div>
  <div id="grad13">
   <h3>Radial Gradient Background (Using keyword farthest-corner)</h3>
  </div> 
 </body>
</html>

Download


Repeating a radial-gradient

This function of radial-gradient can be used for repeating the things you create with css3.

Repeating a radial-gradient

<!DOCTYPE html>
<html>
 <head>
  <style>
   #grad14
    {
    height:140px;
    width:180px;
    color:#fff;
    text-align:center;
    background: -webkit-repeating-radial-gradient(#00C492 10%, #A5DF00 20%); /* Safari */
    background: -o-repeating-radial-gradient(#00C492 10%, #A5DF00 20%); /* For Opera 11.1 to 12.0 */
    background: -moz-repeating-radial-gradient(#00C492 10%, #A5DF00 20%); /* For Firefox 3.6 to 15 */
    background: repeating-radial-gradient(#00C492 10%, #A5DF00 20%); /* Standard syntax (must be last) */
    }
  </style>
 </head>
 <body>
  <div id="grad14">
   <h3>Repeating a radial-gradient</h3>
  </div>
 </body>
</html>

Download




Comments are closed.