css transition not applied for backgroundimage property

Asked Sep 14 '18 at 11:51

Active Sep 14 '18 at 11:56

Viewed 38 times

I am not able to apply the transition property on hover for changing the gradient. I have attached the code for reference. I am not sure, where I am going wrong.

#grad1 {
  height: 150px;
  width: 500px;
  background-color: red;
  transition: background-color 2s;
}

#grad1:hover {
  background-image: linear-gradient(to right, red, yellow);
}

<div id="grad1"></div>

edited Sep 14 '18 at 11:53

Gerard

15,418
5
30
52

asked Sep 14 '18 at 11:51

zilcuanu

3,451
8
52
105

1

`background-color` and `background-image` are two separate properties. – Turnip Sep 14 '18 at 11:59
2

short answer: you cannot apply transtion to gradient ... long answer: check the duplicate for workarounds – Temani Afif Sep 14 '18 at 12:00

css transition not applied for backgroundimage property

0 Answers0