HTML CSS Text hover linear-gradient transition fade

Asked Oct 14 '18 at 18:17

Active Oct 14 '18 at 18:30

Viewed 18 times

In HTML/CSS I need to make some text, default the color is white.

But on hover I need to make it fade into gradient color. I am using the next code:

CSS:

.a {
  font-family: Arial;
  font-size: 32px;
  font-weight: bold;
  background: -webkit-linear-gradient(white, white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-transition: 2s; /* Safari */
  transition: 2s;
}
.a:hover {
  background: -webkit-linear-gradient(red, #eee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-transition: 2s; /* Safari */
  transition: 2s;
}

HTML:

<div class="a">SOME TEXT</div>

But on hover the color is changed right away without transition. Any help on this?

edited Oct 14 '18 at 18:30

Temani Afif

245,468
26
309
415

asked Oct 14 '18 at 18:17

user3239349

That is a question about background, this is question about Text color. – user3239349 Oct 14 '18 at 18:44
you used background to color the text so this question is also about background – Temani Afif Oct 15 '18 at 10:26
But I am using background property to make gradient effect on text, because I am trimming it. But ok. – user3239349 Oct 15 '18 at 12:08

HTML CSS Text hover linear-gradient transition fade

0 Answers0