Gradient with transparency

Question

Gradient with transparency![enter image description here][1]

I wanted to apply transparent multicolor gradient at the bottom like the below picture. I've found few pages which explains this but still i'm unable to get it working properly.

I tried with this fiddle http://jsfiddle.net/QEhsG/2/ (found on stackoverflow) but im not able to get black and white combination perfectly.

Any help ?

sandeep · Accepted Answer · 2012-06-20 12:11:52Z

3

Give alpha= 0 to your first rgba. Write like this

button {
    background-color: black;
    background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, 0) 0%, rgba(186, 186, 186, 1) 100%);
    background-image: -moz-linear-gradient(top, rgba(252, 252, 252, 0) 0%, rgba(186, 186, 186, 1) 100%);
    width: 200px;
    height: 100px;
}

Check this http://jsfiddle.net/QEhsG/6/

UPDATED

http://jsfiddle.net/QEhsG/8/

edited Jun 20, 2012 at 12:11

answered Jun 20, 2012 at 12:02

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1184100 Over a year ago

thanks sandeep but when i use this it does it give me the effect what is needed it looks more like a block of element...

Collectives™ on Stack Overflow

Gradient with transparency

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related