CODEWITHSUNDEEP
css
dx_over_dt
dx_over_dt

Reputation: 14318

Using multiple CSS gradients

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.

Upvotes: 0

Views: 2620

Answers (2)

Sachin Kanungo
Sachin Kanungo

Reputation: 1064

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

Upvotes: 2

Sachin Kanungo
Sachin Kanungo

Reputation: 1064

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

Upvotes: 0

Related Questions