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(/;
<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

  Modified On Nov-30-2017 12:53:39 AM

Leave Comment