How to combine two css3 gradients ?

Question

I've Two CSS for HTML BODY Background I'm using this css as background of my page ; i want to overlap these two and get combined effect?

    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

second one is

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Opera */ 
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.75, #FFFFFF), color-stop(1, #A3EF69));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

How can i combine these two into one?

Possible duplicate of: http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css — mithataydogmus, Nov 01 '13 at 10:47
You can throw away the `-ms-` prefix for gradients, unless you know of anyone who actually still uses the IE10 pre-releases. (seriously, who would go to the effort of installing the preview, and then not upgrade to the full release when it was available... or at least some time over the last year since it came out) — Spudley, Nov 01 '13 at 10:51
@mithataydogmus ; i tried option provided in "Possible Duplicate" mentioned by you , but I'm not getting required results ; so posted this question. — Pawan Mude, Nov 01 '13 at 14:07

score 16 · Accepted Answer · edited May 23 '17 at 10:30

Two Issues with Your Code

First, the two images must be called within a single background-image call, otherwise the way the "cascading" part of CSS works the second one will just override the first. So the first thing that needs changing is to make all of the calls grouped like this (each successive call separated by commas):

background-image: 
  linear-gradient(top, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%), 
  linear-gradient(bottom, #FFFFFF 0%, #FFFFFF 50%, #FFFFFF 75%, #A3EF69 100%);

This is what the possible duplicate question noted to do, and that is correct, but it probably did not work for you because...

Second, each of those gradient images you have defined are non-transparent, so one of them will "over paint" on top of the other and effectively give you just one image. I think what you really want is a fade effect, which will require you to use alpha opacity to achieve. So every instance of #FFFFFF needs to change to rgba(255, 255, 255, 0), then you get the blending I believe you seek:

background-image: 
  linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0) 75%, #A3EF69 100%), 
  linear-gradient(bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, 
    rgba(255, 255, 255, 0) 75%, #A3EF69 100%);

**Note to others:** This was confusing me, as mine wasn't working. What really threw me was **the draw order is the reverse of what I expected**: The gradient I wanted to draw *over* the other needed to come **first** in the list of linear-gradients. My fully opaque gradient needed to come **last**. I mistakenly thought they'd be rendered in the order they are listed. This was incorrect, they are seemingly rendered in **reverse** order. — Jamin Grey, Jun 07 '22 at 21:30

How to combine two css3 gradients ?

1 Answers1

Two Issues with Your Code

Linked