This Post Explains How to Give Gradients Using CSS. CSS3 is a boon to all web designers. One of its finest features is that it has eliminated the need to use images tiles or sprites for gradient and hover effects.

To Give Gradient To a Box We will simply exploit the CSS3’s Box-Shadow Property. I will Give You a Detailed Example including Hover Effects.

1. First Let us create Our Div to which we will be applying the Gradient. This is just a simple box with some text(literally).

{code type=html}

{/code}

2. Next We will do the Styling(the Important part).

{code type=CSS}
#box {
color: #fff; /*Text Color is White, Because we will use Black BG */
display: inline-block; /*To Wrap the Text part only*/
padding: 10px;
background: #000; /*The Main Background is Black(pure). */
box-shadow: inset 0px -15px 16px #888; /*This is Explained Later */
}

/* For the Hover Effect Just inter-change the Background and Shadow Color */
#box:hover {
background: #888;
box-shadow: inset 0px -15px 16px #000;
}
{/code}

Let me Explain the box-shadow property a little bit. The First term says ‘inset‘. Inset Means the shadow will be inside the div. The second term tells us about the shadow in Horizontal Direction(which is not needed here, so it is set to 0). The next Term which is set to Negative, will drop a shadow from bottom of the div of the color #888, specified by the last term.

There is one more term, which I have set to 16px. This blurs the shadow or smoothens its edges. This very important if we want a gradient feel. And it’s value should be higher than the other two terms.

Note: There is no such rule that there can not be horizontal Gradient. You can use your creative skills in any manner you want.

You can also apply positive value to the shadow, if you want the gradient to fall from top. For, the hover effect we have interchanged the shadow and background color, which generally designers do. You can do something more creative as well.

Demo:

This Demo isn’t very stylish. You can use some decent color combination to get a beautiful gradient.