Stacking multiple CSS Gradients

Question

I've found similar questions, but nothing that seems to answer my problem (if it's even possible).

I'm trying to stack multiple gradients starting with this (to right):

background: linear-gradient(to right, #3467a6, #c0d8dc 20%, #f3fbe6 50%, #c0d8dc 80%, #3467a6)

Here is a working Stack Snippet

.content-background {
  width: 100%;
  height: 400px;
	background: linear-gradient(to right, #3467a6, #c0d8dc 20%, #f3fbe6 50%, #c0d8dc 80%, #3467a6), 
  
  linear-gradient(to bottom, #3467a6 50%, #481f42);
				
}

<div class="content-background"></div>

Now, what I'm trying to do is also create an additional gradient "to bottom" so the blue slowly turns to maroon as you scroll down the page.

Can this be done?

You can find my Fiddle here: https://jsfiddle.net/spaceout/se2a97du/12/

Yes it can be done but you need to introduce some transparency for the colors to mix. — zzzzBov
– zzzzBov, Commented Apr 14, 2018 at 18:08
I guess I wouldn't want to actually add a "to bottom", but instead another "to right" gradient that doesn't start until half way down the page. — Chad Smith
– Chad Smith, Commented Apr 14, 2018 at 19:09

Persijn · Accepted Answer · 2018-04-14 18:37:50Z

1

Double linear-gradient background

After zzzzBov comment, i tried to add two linear-gradients to a background-image.
Linear-gradient with rgba (red green blue alpha) color so we can set the Alpha to partly transparent.

.example {
  display: inline-block;
  width: 100px;
  height: 100px;
}

.first {
  background-image: linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(0, 200, 0, 0.2));
}

.second {
  background-image: linear-gradient(90deg, rgba(0, 255, 255, 0.5), rgba(100, 50, 100, 0.5));
}

.doubletrance {
  background-image: linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(0, 200, 0, 0.2)), linear-gradient(90deg, rgba(0, 255, 255, 0.5), rgba(100, 50, 100, 0.5));
  */
}

<div class="example first"></div>
<div class="example second"></div>
<div class="example doubletrance"></div>

answered Apr 14, 2018 at 18:37

Persijn

15.1k4 gold badges46 silver badges73 bronze badges

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

Collectives™ on Stack Overflow

Stacking multiple CSS Gradients

1 Answer 1

Double linear-gradient background

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Double linear-gradient background

Comments

Your Answer

Sign up or log in

Post as a guest

Related