How to make multiple gradient work with CSS

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.

You're using opaque colours. This means the topmost one will hide all behind it. You probably want to do it as a single gradient, transparent in the middle. — Chris Morgan
– Chris Morgan, Commented Jun 6, 2012 at 3:00
@Chris I need the shadow in all four borders, not only left and right but in top and bottom also. Is it possible by using a single gradient and color stops — Arun P Johny
– Arun P Johny, Commented Jun 6, 2012 at 3:06
You'd need two gradients to achieve something like that. But by the sound of it, you don't want gradients but rather box-shadow. — Chris Morgan
– Chris Morgan, Commented Jun 6, 2012 at 3:17

Chris Morgan · Accepted Answer · 2012-06-08 13:35:28Z

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/

answered Jun 8, 2012 at 13:35

Chris Morgan

91.6k28 gold badges217 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Arun P Johny Over a year ago

Is it possible to give a fading effect also to the border, like the border become transparent as it goes deep?

Chris Morgan Over a year ago

@ArunPJohny: you don't need the border there at all. Are you wanting it to fade outwards as well as inwards?

Arun P Johny Over a year ago

fade inwards, at the border the #e1e1e1 and it should get faded as #ffff inward

Chris Morgan Over a year ago

@ArunPJohny: that's what the box-shadow does. If you want to get it precisely #e1e1e1, tweak the values appropriately. I only went to an approximation.

Nandu · Accepted Answer · 2012-06-06 03:31:18Z

0

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

answered Jun 6, 2012 at 3:31

Nandu

484 bronze badges

Comments

Arun P Johny · Accepted Answer · 2012-06-07 10:36:28Z

0

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.

answered Jun 7, 2012 at 10:36

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Arun P Johny Over a year ago

@Chris, yes I used your suggestion about the opacity... but I'm not 100% happy with the solution since chrome is not taking a pixel based width for the border... it requires a % as the width parameter...

Collectives™ on Stack Overflow

How to make multiple gradient work with CSS

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related