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.
Leave Comment