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/