Question

I am new to using CSS3 (specially gradients). How do I convert the following HTML/CSS coded border to one with CSS3-based gradient (i.e. using no image)

I want to convert FROM

Normal CSS border/background color

TO

Box with Gradient

Width/Heights are approx in the img above…I need to know how to get the gradient as per the 2nd fig ?

Answer 1

Without seeing the colors you are working with, you want to do something like this

.class{
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
    background: -moz-linear-gradient(top, #fff, #000);
}

Here’s a tool that might help:

http://gradients.glrzad.com/