How to put gradient opacity in my gradient? - css

Question

In the mockup I have, the stripes have a gradient opacity effect from transparent to semi-transparent.
Currently, I have this:
How do I make it so that the white stripes have the transparency gradient?
Here is my current code.
body {
background: gray;
}
.bar {
height: 50px;
width: 100%;
background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
border-radius: 100rem;
position: relative;
}
/** Stripes. */
.bar::before {
content: "";
position: absolute;
border-radius: 100rem;
height: 100%;
width: 100%;
background-size: 90px 100%;
background-image: linear-gradient(
120deg,
transparent,
transparent 40%,
white 40%,
white 60%,
transparent 60%
);
}
<div class="bar"></div>

Answer 1

You can add a mask layer on the pseudo-element:
body {
background: gray;
}
.bar {
height: 50px;
width: 100%;
background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
border-radius: 100rem;
position: relative;
}
/** Stripes. */
.bar::before {
content: "";
position: absolute;
border-radius: 100rem;
height: 100%;
width: 100%;
background-size: 90px 100%;
background-image: linear-gradient( 120deg, transparent 40%, white 41% 60%, transparent 61%);
-webkit-mask:linear-gradient(white,transparent);
mask:linear-gradient(white,transparent);
}
<div class="bar"></div>

Answer 2

In case you need better browser support than masks provide, I'd do something with an additional container, but overall it's a funny looking progress bar, hope it's for a kids game or something.
body {
background: gray;
padding-top: 5rem;
}
.bar-container {
border-radius: 100rem;
overflow: hidden;
border: darkgray 2px solid;
box-shadow: 0 2px 8px rgba(0,0,0,.5);
background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
}
.bar {
height: 50px;
width: 100%;
position: relative;
background-size: 90px 100%;
background-image: linear-gradient(
120deg,
transparent,
transparent 40%,
white 40%,
white 60%,
transparent 60%
);
}
.bar::before, .bar::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
.bar::before {
left: 0;
background: linear-gradient(45deg, rgba(252,2,82,1) 0%, rgba(0,0,0,0) 50%);
}
.bar::after {
right: 0;
background: linear-gradient(-45deg, rgba(1,253,217,1) 0%, rgba(0,0,0,0) 50%);
}
<div class="bar-container">
<div class="bar"></div>
</div>