Home/ Questions/Q 8117677
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T04:15:06+00:00

Gradient with transparency![enter image description here][1] I wanted to apply transparent multicolor gradient at

  • 0

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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0