CODEWITHSUNDEEP
htmlcss
user1184100
user1184100

Reputation: 6894

Gradient with transparency

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 ?

Upvotes: 0

Views: 120

Answers (1)

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 3

Related Questions