Laying multiple gradients

[Fun Seeker]

Hi everyone,

I am trying to layer two hard-stop linear gradients to achieve the desired look but without success.

The first is horizontal, with 70% white and 30% red. The second is vertical, with 30% white, and 70% red. In the latter, I want the 70% red to be fully transparent so that the underlying gradient appears, delivering the final result (3rd pic).

Here is the code, but I can't get it to work. Is it possible? If so, what changes need to be made?

.gradient {

min-height: 500px;

background-image: linear-gradient (
to right, rgba(255,255,255,1.00) 0%, rgba(255,255,255,1.00) 70%, rgba(255,0,0,1.00) 70%, rgba(255,0,0,1.00) 100%), linear-gradient (
to bottom, rgba(255,255,255,1.00) 0%, rgba(255,255,255,1.00) 30%, rgba(255,0,0,0.00) 30%, rgba(255,0,0,0.00) 100%);

}

Thanks for any help you can provide.

Kind regards,

Mark

[Nancy OShea · Accepted solution]

Multiple background-images are separated by commas and stacked like transparencies layered atop one another.

1st = always on top,

2nd = always underneath,

background-repeat:

refers to 1st,

refers to 2nd,

background-position:

refers to 1st,

refers to 2nd,

and so on...

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrou...

Hopefully this does what you want.

background:
linear-gradient(to bottom, white 40%, transparent 40%),
linear-gradient(to right, white 70%, red 30%);
background-repeat: no-repeat, repeat;
background-position: bottom, top;
}

[Fun Seeker]

Thanks so much Nancy. It works just fine.

Mark

[Nancy OShea]

Glad to be of help. 😊