Menu
After writing the following code the color stops at the end of the line and starts again at the next line. I want it to continue and end with a different color till it reaches the end of second line. Then continue doing so.
Here is my css class that I am using on a p tag.
$font: 'Poppins', sans-serif;
.text {
background: linear-gradient(to right, #000000 0%, #4ad7fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font: {
size: 3vw;
family: $font;
};
}
Here is what I am getting:
And here is what I expect:
Can I do it without using any javascript? Although javascript is also fine.
558
To add a gradient text color to your HTML text elements, you’ll need the following CSS properties: Why are we using the background property for coloring text? The approach does seem a bit hacky, but I promise that it works!
This makes the colors from the gradient class ( .text-gradient) that we added to the <h2> element stretch beyond the width of your text because it’s targeting the background property. I’ll add a border to the text example to make my point clear:
Step 1: Apply a basic background to the body tag and align the text to center of the page. Step 3: Apply the linear gradient property with any colors of your choice. Step 4: Now apply webkit properties, the first one will make the whole gradient-background transparent and the second property will fill the text with the gradient background.
In the most basic version of a CSS gradients, you'll need is at least two colors for the gradient to transition between. These are typically referred to as color-stops since, generally, they tell the code at which points each color should stop along the text gradient.
Just add a display : inline, and a few red :
.text {
display: inline;
background: linear-gradient(to right, #000 0%, blue 25%, #000 50%, red 75%, #000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3vw;
font-family: "Poppins", sans-serif;
}<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, quo consectetur similique blanditiis explicabo dolorum quam voluptate, accusamus repellat sed ipsam doloribus facere quas perspiciatis veritatis ad dicta. Tenetur, vero?
</p>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
