Home > DeveloperSection > Articles > Gradient Color using CSS3

Gradient Color using CSS3

0 Comment(s)
 2089  View(s)
Rate this:

Gradient Color using CSS3

In this article I have tried to explain how make a rounded div with gradient color.

We can make rounded div with the help of border-radius property and make gradient color with help of linear-gradient property.







   box-shadow: 10px 10px 5px #888888;

   overflow: hidden;

   border:2px solid #a1a1a1;





   padding:10px 40px;

   border-radius: 50px;


   background: -webkit-linear-gradient(#0A284B, #135887); /* This line for make this code to Compatible to Chrome*/  

   background: -o-linear-gradient(#0A284B, #135887); /* This line for make this code to Compatible to Opera*/  

   background: -moz-linear-gradient(top, #0A284B, #135887);/* This line for make this code to Compatible to Mozilla */  

   background: linear-gradient(#0A284B, #135887);

   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887',      GradientType=1)"; /* This line for make this code compatible to IE. */

   zoom 1;

   -pie-background: linear-gradient(#FFFFFF, #C5CBC3);

   behavior: url(/PIE.htc);











<div class="DivFirst">

<div class="DivSecond"><p>mindstick©</p> <font size="3" color=#D3D3D3> Unleash your Imagination </font></div>





Above is code I am create two classes first is Divfirst and second is DivSecond.


We can create curve border with the help of border-radius property.

Gradient Color:

Gradient color means a color gradient (sometimes called a color ramp or color progression) specifies a range of position-dependent colors, usually used to fill a region.

Linear-gradient ()

The CSS linear-gradient () method creates an <image> which represents a linear gradient of colors. Linear gradients are defined by an axis, the gradient line, with each point on it being of different colors. Vertical lines to the gradient-line have one single color, the one of the point on the gradient line.


Below is output:

Gradient Color using CSS3

Don't want to miss updates? Please click the below button!

Follow MindStick