Using multiple CSS gradients

Question

I want to create a rainbow effect that fades using CSS gradients.

Vertically, I want the rainbow effect:

background: linear-gradient(to bottom, red, orange, yellow, green, blue, violet);

Horizontally, I want the fading effect:

background: linear-gradient(to right, rgba(1,1,1,1), rgba(1,1,1,0));

My initial thought was to have two divs, the outer with the transparency, and the inner with the rainbow, but the transparency just got swallowed. Then it occurred to me that background on the outer element is not what will make this work. It'd need to be filter for that pattern to work.

So either I need to figure out how to make filter work with a gradient (possibly an SVG that I can stretch?), or I need to use a single <div> whose background somehow takes into account both linear gradients. I'd prefer the latter, since it's much simpler.

Are either of these possible?

Update

Looking at How to add multiple css gradient as a multiple background? makes it look like I should just be able to do:

background: linear-gradient(to right, rgba(1,1,1,1), rgba(1,1,1,0)), linear-gradient(to bottom, red, orange, yellow, green, blue, violet);

This is getting me close, but the horizontal gradient isn't causing the vertical gradient to gain transparency; rather, it's causing it to go from black to fully visible.

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

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

I've also noticed that in the first gradient, the first three values in rgba() don't matter--only the alpha does. I don't know what to make of this.

possible duplicate of How to add multiple css gradient as a multiple background? — Zakaria Acharki
– Zakaria Acharki, Commented Sep 12, 2015 at 17:35
Possibly... I'm having troubles getting the transparency to work using that method. — dx_over_dt
– dx_over_dt, Commented Sep 12, 2015 at 17:39
@ZakariaAcharki I updated the OP with what happens when applying the answer from your link. — dx_over_dt
– dx_over_dt, Commented Sep 12, 2015 at 17:50

Sachin Kanungo · Accepted Answer · 2015-09-12 19:20:21Z

2

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

answered Sep 12, 2015 at 19:20

Sachin Kanungo

1,0949 silver badges17 bronze badges

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

4 Comments

Sachin Kanungo Over a year ago

You can co-relate your background priorities with gradient and it can simulate an opaque vision.

dx_over_dt Over a year ago

Ahh, my issue was that I'd thought rgba()'s first three parameters were floats between 0 and 1, rather than values between 0 and 255. Thanks! This works assuming the background is white. In order to work on any background, there'd probably have to be some javascript involved.

Sachin Kanungo Over a year ago

Nope. Think that, your background is magenta, then you need to apply rgba code of magenta over there with last opacity set to whatever you want. It will give a soothing finish to your gradient without JS.

dx_over_dt Over a year ago

Yes, I mean that for it to work over any background, you'd have to figure out what the background color of the parent is. It still doesn't work for an absolute div moving across a screen, displaying what's behind it--which is what I'm needing it to do--but I've changed my method anyway, using individual 1px divs. This allows me to make the div wavy, rather than a straight line.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Check this Out

Just less complications when you can use a gradient generator for css backgrounds. Handy and easy to use. Some things are better left off lazy.

rainbow {

background: red; /* not working, let's see some red */
background: -moz-linear-gradient( top ,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 255, 0, 1) 15%,
    rgba(0, 255, 0, 1) 30%,
    rgba(0, 255, 255, 1) 50%,
    rgba(0, 0, 255, 1) 65%,
    rgba(255, 0, 255, 1) 80%,
    rgba(255, 0, 0, 1) 100%);
background: -webkit-gradient(linear,  left top,  left bottom, 
    color-stop(0%, rgba(255, 0, 0, 1)), 
    color-stop(15%, rgba(255, 255, 0, 1)),
    color-stop(30%, rgba(0, 255, 0, 1)),
    color-stop(50%, rgba(0, 255, 255, 1)),
    color-stop(65%, rgba(0, 0, 255, 1)),
    color-stop(80%, rgba(255, 0, 255, 1)),
    color-stop(100%, rgba(255, 0, 0, 1)));
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 12, 2015 at 18:55

Sachin Kanungo

1,0949 silver badges17 bronze badges

4 Comments

Sachin Kanungo Over a year ago

you can use opacity:0.3 for your transparency over the element

dx_over_dt Over a year ago

That will make the whole thing transparent. I want it to have a gradient transparency: opaque on the left gradually becoming transparent on the right.

Sachin Kanungo Over a year ago

are you talking about animations?

dx_over_dt Over a year ago

No, not unless the animation is a single frame long and achieves what I want. Run the code snippet in the post, and imagine, instead of turning to black, the rainbow becomes transparent.

Collectives™ on Stack Overflow

Using multiple CSS gradients

Update

2 Answers 2

4 Comments

rainbow {

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

4 Comments

rainbow {

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related