1

So I'm trying to make some text in my site be the same color as the background. I've thought about 2 ways for me to do that, either to make the text have the background's color in that particular spot (like a cutout in the div) with some JS probably - which I don't know how to do (and haven't found anything online). Or, I could make it gradient and control where the gradience starts.

here's my code:

.catchphrase {
    font-family: Niconne; 
    font-size: 3.5vw;
    font-weight: 400;
    background: -webkit-linear-gradient(0deg, #1761A0 74%, #6D37B0 26%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<div id="catch_div">
    <asp:Label ID="Label1" runat="server" Text="Label" CssClass="catchphrase">Feel the rythem</asp:Label>
</div>

And this is what it's producing, the gradience just disappeared when I added %values:

enter image description here enter image description here

Anyone's got any ideas? (if there's a way to make the text be the same color as the background I'd love to hear that as well)

julianstark999
  • 3,450
  • 1
  • 27
  • 41
kfir ezer
  • 159
  • 1
  • 11

2 Answers2

2

.catchphrase{
    font-family: Niconne; 
    font-size: 5vw;
    font-weight: 400;
    background: #75CF55;
    background: -webkit-linear-gradient(to right, #75CF55 0%, #CF1BC9 41%);
    background: -moz-linear-gradient(to right, #75CF55 0%, #CF1BC9 41%);
    background: linear-gradient(to right, #75CF55 0%, #CF1BC9 41%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
<div id="catch_div">
    <asp:Label ID="Label1" runat="server" Text="Label" class="catchphrase">Feel the rythem</asp:Label>
</div>
julianstark999
  • 3,450
  • 1
  • 27
  • 41
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
0

you need to put : "display:inline-block"

.catchphrase{
    font-family: Niconne; 
    font-size: 3.5vw;
    font-weight: 400;
    background: -webkit-linear-gradient(0deg, #1761A0 74%, #6D37B0 26%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display:inline-block;
}
julianstark999
  • 3,450
  • 1
  • 27
  • 41
cmereoiu
  • 69
  • 3