Laying multiple gradients

Question

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 Answer

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_backgrounds

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded