articles

Home / DeveloperSection / Articles / Gradient Color using CSS3

Gradient Color using CSS3

Vijay Shukla 4135 26-Dec-2012

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.

<html>

<head>
<style>
.DivFirst
{
   border-radius:50px;
   box-shadow: 10px 10px 5px #888888;
   overflow: hidden;
   border:2px solid #a1a1a1;
   width:580px;
}
.DivSecond
{
   padding:10px 40px;
   border-radius: 50px;
   width:500px;
   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);
}
p
{
    font-weight:bold;
    color:#D3D3D3;
    font-size:20px;
}
</style>
</head>
<body>
<div class="DivFirst">
<div class="DivSecond"><p>mindstick©</p> <font size="3" color=#D3D3D3> Unleash your Imagination </font></div>
</div>
</body>
</html>

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

Border-radius

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



Updated 07-Sep-2019

Leave Comment

Comments

Liked By