How to make a gradient for text from color to color?

Question

 .gradient {
     background: linear-gradient(to right, blue, green 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 300%;
  }

<div class="gradient">COUNTRY</div>

Add div too `display:inline `.because Div having width:100%; so text is to small. — Rayees AC, Sep 12 '20 at 14:07
why are you accepting an answer that doesn't provide the solution that seems to work for you? this doesn't make sense — Temani Afif, Sep 12 '20 at 17:37

score 1 · Answer 1 · answered Sep 12 '20 at 13:51

1

Change your "green" color percentage like:

background: linear-gradient(to right, blue, green 10%)

answered Sep 12 '20 at 13:51

snsakib

1,062
9
14

score 1 · Accepted Answer · answered Sep 12 '20 at 13:58

1

I make some changes to your CSS.

          .gradient {
font-size: 72px;
      background: linear-gradient(to right, blue 10%, green 50%);
      background-image: linear-gradient(to right, blue 10%, green 50%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

<div class="gradient">COUNTRY</div>

You can try this code of CSS.

answered Sep 12 '20 at 13:58

bhumin

188
2
9

It doesn't work if open it in a full window. – WebSS Sep 12 '20 at 14:06
Div having width:100% to add `display:inline` . – Rayees AC Sep 12 '20 at 14:09
Thanks, I use display:inline and it works how need. – WebSS Sep 12 '20 at 14:28

How to make a gradient for text from color to color?

2 Answers2