How to make multiple gradient work with CSS - html

Question

I'm trying to use multiple gradient in one of my projects. My Objective is to have a fading shadow from the border of a section element.
From different sources this is what I've come up with till now
.section2 {
border-radius: 10px;
border: 2px solid #E1E1E1;
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%), -moz-linear-gradient(left, #E1E1E1 0%, #FFFFFF 5%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left, right bottom, color-stop(0, #E1E1E1), color-stop(.05, #FFFFFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #FFFFFF 95%, #E1E1E1 100%), -webkit-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%);
}
But the problem is this is showing only the first gradient, the subsequent once are ignored.
You can see this in action here.

Answer 1

box-shadow is much more appropriate for what you're wanting to do. It's simpler, more predictable and neater than your gradient approach.
All it needs is a single property; play with the values to achieve the nicest result (read up on what they do so you're not playing blindly). This is what I did, which achieves a similar effect to your gradients:
box-shadow: inset 0 0 30px 10px #E1E1E1;
Demo: http://jsfiddle.net/EDcGP/6/

Answer 2

/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #FF0000 95%, #E1E1E1 100%);
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%);
Tried the above css in firefox and Chrome, both works. Could not try in Safari.
You have to remove the second gradient style. having one gradient will work.

Answer 3

I've almost solved by using opacity along with the background color as given below.
background-image: -moz-linear-gradient(to right, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to left, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to bottom, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to top, #E1E1E1 0, rgba(255, 255, 255, 0) 50px);
A working sample can be found here.