Help Linear Gradient with transparencies

[RageOfInfinity]

I'd like to make a linear gradient for my background where, from left to right, the first color becomes less transparent, and the second color, from right to left, becomes less transparent.

If it's possible, I'd also like to do something similar with the font color, I know I'd have to put the font on top of a div with the color gradient I'm talking about, and the actual font color as transparent.

 

[deer]

is this what you're thinking of?

there's two different divs being used:
div one: background-image: linear-gradient [ i used "rgba" for the colours so that the background is more transparent than the text ] ; 3 colours used
div two: background: linear-gradient [ i used the hex code for the text and then added "webkit" information such as "background-clip: text" and "text-fill-color: transparent" ] ; 2 colours used

i used another div for the font-size, line-height, and text-alignment

text here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor odio, vehicula eget elit in, tincidunt condimentum massa. Donec rhoncus cursus vulputate. In pulvinar sapien ante, vitae bibendum arcu condimentum non. Vestibulum et porta libero. Duis feugiat lobortis metus a sodales. Etiam fringilla ut turpis ac ultrices. Nulla pellentesque ipsum ac convallis imperdiet. Aliquam erat neque, lacinia vitae pellentesque sed, lobortis suscipit neque. Sed quis neque dignissim enim varius vulputate. Nunc mi neque, lacinia venenatis purus quis, sodales sollicitudin sapien. In enim dui, scelerisque sed urna eget, eleifend pulvinar lorem. Nullam sit amet felis egestas, malesuada lacus eu, varius nulla. Curabitur vitae magna dolor.

[div=max-width: 980px; background-image: linear-gradient(90deg, rgba(255, 153, 153, 0.8), rgba(255, 230, 153, 0.8), rgba(204, 255, 153, 0.8)); padding: 10px; margin: auto;][div=text-align: center; font-size: 50px;  background: linear-gradient(90deg, #ff0000, #ffff00);  -webkit-background-clip: text; -webkit-text-fill-color: transparent;][font=Poppins][b]text here[/b][/font][/div][div=font-size: 12px; line-height: 16px; text-align: justify; color: black;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor odio, vehicula eget elit in, tincidunt condimentum massa. Donec rhoncus cursus vulputate. In pulvinar sapien ante, vitae bibendum arcu condimentum non. Vestibulum et porta libero. Duis feugiat lobortis metus a sodales. Etiam fringilla ut turpis ac ultrices. Nulla pellentesque ipsum ac convallis imperdiet. Aliquam erat neque, lacinia vitae pellentesque sed, lobortis suscipit neque. Sed quis neque dignissim enim varius vulputate. Nunc mi neque, lacinia venenatis purus quis, sodales sollicitudin sapien. In enim dui, scelerisque sed urna eget, eleifend pulvinar lorem. Nullam sit amet felis egestas, malesuada lacus eu, varius nulla. Curabitur vitae magna dolor.[/div][/div]

 

[RageOfInfinity]

Yes, thank you!