CSS Background Gradient Hover Transition Workaround

Background gradients cannot be transitioned with CSS. We can work around it with pseudo elements and, of course, JavaScript. But maybe the quickest way to accomplish it, is setting background colors for the transition and using opacity on the gradient.

Example

selector {
  background-color: #353535;
  background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, .9) 100% );
}

selector:hover {
  background-color: #45a7e2;
  background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .2) 100% );
  transition: background-color .3s ease-in-out;
}