How to create layered responsive gradients for header background-CodePudding

Thank you for your help and suggestions. I am much more on the dev side of things and trying to figure out design side of things. Anyway...

I seem to be able to create both gradients but can't get them to work together. Basically trying to get these layered and responsive so they (and parent section) can shrink and grow depending on content in the header be responsive from PC to tablet to mobile.

In the image you will see a dark blue gradient with a light blue one under it. Then the white area is transparent. I've tried using clip paths but one seems to cut the other off. I am building this in Elementor so I do not have all the code for the full section block. I have been adding this to the custom CSS for the section. I was just hoping for some direction in how to layer these gradients so they are responsive without cutting the other off. Hopefully in 1 div/section.

Here is what I was using but please let me know if there is a better technique.

Left Blue Gradient

background-image: linear-gradient(90deg, #18253C 0%, #293D62 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);

Right Light Blue Gradient

background-image: linear-gradient(90deg, #cbdeee 0%, #5480a5 100%);
clip-path: polygon(100% 75%, 80% 75%, 100% 100%);

CodePudding user response：

It would be possible to continue to use clip paths on linear gradient backgrounds and you could put them on pseudo elements rather than the element itself.

This snippet does that, layering the two pseudo elements behind the main element so acting as background without affecting the actual element:

.bg {
  width: 100vw;
  height: 100vw;
  positio: relative;
}

.bg::before,
.bg::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.bg::after {
  background-image: linear-gradient(90deg, #18253C 0%, #293D62 100%);
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}

.bg::before {
  background-image: linear-gradient(90deg, #cbdeee 0%, #5480a5 100%);
  clip-path: polygon(0 50%, 100% 50%, 100% 95%, 0 50%);
}

<div ></div>