What's new
  • When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

Help Linear Gradient with transparencies

RageOfInfinity

The Lord of Shadows
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.
 

crucially

𝙎𝘼𝙄𝙉𝙏&𝙎𝙄𝙉𝙉𝙀𝙍𝙎
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.


Code:
[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]
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top