CODEWITHSUNDEEP
htmlcss
Arun P Johny
Arun P Johny

Reputation: 388346

How to make multiple gradient work with CSS

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.

Upvotes: 0

Views: 503

Answers (3)

Chris Morgan
Chris Morgan

Reputation: 90812

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/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388346

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.

Upvotes: 0

Nandu
Nandu

Reputation: 48

/* 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.

Upvotes: 0

Related Questions