How to Add Multiple Linear-Gradients to a CSS Background

How do I add multiple linear-gradients to a css background? If

Generally you can add multiple backgrounds, separated by commas. The first one listed will appear on top.

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

http://lea.verou.me/css3patterns/

Here's a basic outline. Play with the numbers for your exactly desired effect:

div {

    background: 
        linear-gradient(to top, transparent, #b1b1b1 100%),
        gray repeating-linear-gradient(45deg, transparent, transparent 35px,
        rgba(255, 255, 255, 0.5) 35px, 
        rgba(255, 255, 255, 0.5) 70px);

    background-clip: padding-box;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0px 1px 3px 1px #969494;
    height: 250px;
    width: 250px;
}

Demo: https://jsbin.com/fidaxigaxi/edit?html,css,output

Combining multiple linear gradients in one display

You need to specify a few things to make linear-gradients work as 'stripes' otherwise the first one, which takes precedence, will repeat and overwrite the others.

Your stripes look as though they are continuous from one color to another (the second color being white) so there is no need to specify the start value. But if you give a start value of 100% then none of that color will be shown.

This snippet puts a white stripe between the other two to make it look more like the image in the question.

.bg-grad {

    background-image:
        linear-gradient(rgba(255, 255, 255, 1),rgba(192, 204, 92, 1)),
        linear-gradient(white, white),
        linear-gradient(rgba(120, 196, 212, 1), rgba(255, 255, 255, 1));
   background-size: 33.33% 100%;
   background-position: 0 0, 33vw 0, 66vw 0;
   background-repeat: no-repeat no-repeat;
   height: auto;
   width: 100%;
}

<div class="bg-grad" >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit temporibus expedita doloribus ducimus nam rem, eaque tempora aliquid accusamus repellat aut error suscipit a molestiae voluptas soluta ad eius quo. Nobis tempora facere, dicta perferendis vel perspiciatis illum? 

</div>

Combine 2 linear gradients using `background` css?

Each of the gradients you apply are non-transparent, so one of them will always lay on top of the other. You'll need to apply a fade effect using alpha values.

The look here for more detail: How to combine two css3 gradients ?

.double-gradient {
  display: grid;
  place-items: center;
  height: 200px;
  width: 200px;
  background: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(251, 251, 251, 0.1) 100%), linear-gradient(90deg, #84d2ff, #8d5acd);
}

<div class="double-gradient">
  Double Gradient
</div>

How to add multiple gradients with different directions CSS

There will be slight change in your html structure, All you need to do I fill a parent container with "bright gradient" and in it's child container, fill the section with darker one. Please check the code snippet below for better understanding :

.top-card {
  height: 230px;
  border-radius: 3%;
  text-align: center;
  padding: 20px 0px;
  }

  .gradient {
  max-width: 295px;
  min-width: 150px;
  background: rgb(248,197,117);
  background: linear-gradient(90deg, rgba(248,197,117,1) 13%, rgba(214,79,148,1) 91%);
  border-radius:3%;
  }

  .instagram {
    background: linear-gradient(to top, hsl(228, 28%, 20%) 98%, rgba(255, 255, 255, 0%) 2%);
  }

<div class="gradient">
  <div class="top-card instagram">
    <div class="name-container">
      <img src=images/icon-instagram.svg class="top-icon" alt="instagram">
      <p class="name">@realnathanf</p>
    </div>
    <h1 class="follower-number">11k</h1>
    <p class="follower-text">FOLLOWERS</p>
    <div class="increment-container-top">
      <img src="images/icon-up.svg" class="arrow" alt="arrow">
      <p class="increment-increase">1099 Today</p>
    </div>
  </div>
  </div>

Using multiple CSS gradients

.rainbow {  height: 200px;  background: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(1, 1, 1, 0)), linear-gradient(to bottom, red, orange, yellow, green, blue, violet);}

<div class='rainbow'></div>

How to combine two css3 gradients ?

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%);

how to add multiple colors in background with linear gradient?

h1{  
  font-size: 64px;
  background-image: linear-gradient(to right, #ba81cf, #6886d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}