Continuous gradient over two seperate divs

I have two divs where one of them acts like a section divider. I would like to make a continuous gradient over both of them. See expected output in picture. Where the white space in div1 is transparent

I can only manage to get gradient on both, but not continous.

Code to reproduce:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Continuous Gradient Across Two Divs</title>
        <style>
            .div1 {
                height: 200px;
                background: linear-gradient(
                    to bottom,
                    rgba(255, 255, 255, 0),
                    rgba(255, 0, 0, 1)
                );
            }

            .div2 {
                height: 200px;
                background: linear-gradient(
                    to bottom,
                    rgba(255, 0, 0, 1),
                    rgba(0, 0, 255, 1)
                );
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
    </body>
</html>

Solution

Do you mean something like this? i am not 100% sure i understood you right (shape is just an example thats easier to make)

.parent{
  width: 300px;
  height: 400px;
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}
.parent > div {
  width: 100%;
  height: 50%;
}
.top{
clip-path: polygon(13% 73%, 30% 61%, 45% 69%, 66% 60%, 79% 65%, 100% 59%, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 0 100%, 0 78%);
  background: rgb(252,176,69);
  background: linear-gradient(360deg, rgba(252,176,69,1) 0%, rgba(194,52,52,1) 50%, rgba(255,255,255,0) 53%);
  border-bottom: 1px solid black;
}
.bottom{
  background: rgb(65,255,224);
  background: linear-gradient(360deg, rgba(65,255,224,0.48503151260504207) 0%, rgba(252,176,69,1) 100%);
}

<div class="parent">
  <div class="top"></div>
  <div class="bottom"></div>
</div>