Achieving a smooth blending of gradient in the foreground into the background

I am attempting to create a pure CSS-generated rainbow gradient overlay on top of an underlying background. The goal is to have the rainbow fully opaque at the center and gradually fade to fully transparent near the edges, seamlessly blending with the background.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth Fading of CSS-Generated Rainbow Gradient</title>
    <style>
        .container {
            position: relative;
            width: 500px;
            height: 300px;
            overflow: hidden;
            background: repeating-linear-gradient(45deg, #f00, #f00 10px, #0f0 10px, #0f0 20px);
        }

        .rainbow-overlay {
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
            mask: 
                linear-gradient(transparent 10%, black 20%, black 80%, transparent 90%) /* vertical */ ,
                linear-gradient(to right, transparent 10%, black 20%, black 80%, transparent 90%) /* horizontal */;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="rainbow-overlay"></div>
    </div>
</body>
</html>

Unfortunately, the current implementation using the mask property with linear-gradient results in a union or merge of the two gradients rather than the desired intersection.

Is there a way to accomplish this smooth fading effect? Any insights or alternative approaches would be greatly appreciated.

Solution

Consider mask-composite to avoid the merge

.container {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
  background: repeating-linear-gradient(45deg, #f00, #f00 10px, #0f0 10px, #0f0 20px);
}

.rainbow-overlay {
  position: absolute;
  inset: 25%;
  background: linear-gradient(to right, violet, indigo, blue, green, yellow, orange, red);
  --m:#0000 10%, #000 20% 80%, #0000 90%;
  mask: 
   linear-gradient(       var(--m)),
   linear-gradient(90deg, var(--m));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
}

<div class="container">
  <div class="rainbow-overlay"></div>
</div>