Answers for "css gradient hover transition"

transition background gradient

In CSS, you can't transition a background gradient. It jumps from one gradient to the other immediately, with no smooth transition between the two. He documents a clever tactic of positioning a pseudo element covering the element with a different background and transitioning the opacity of that pseudo element.

animate css gradient

/* Animate Gradient using CSS Variables */

@property --pc { /* purple/coral */
  syntax: '<percentage>';
  inherits: false;
  initial-value: 30%;
}
@property --co { /* coral/orange */
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

.gradient {
  --pc: 0%;
  --co: 100%;
  
  width: 100vw;
  height: 100vh;
  transition: --pc 3s, --co 3s;
  background: linear-gradient(30deg, purple var(--pc), coral var(--co), orange);
}

.gradient:hover {
  --pc: -100%;
  --co: 0%;
}