Answers for "css fade gradient"

css linear gradient

#grad {
  background-image: linear-gradient(to right, #f1b1b1 , #82e6e8);

}

Css gradient animations

Here a codePen with cool animations:
https://codepen.io/DevLorenzo/pen/ExgpvJM

linear gradient in CSS

The general syntax of linear-gradient is-
background: linear-gradient(gradient direction, color1 , color2 , color3, .....);

Forexample-
background: linear-gradient(46deg,green,blue,yellow,pink);

NOTE: (common mistake) we forget to write the semi-colon (;)

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%;
}