<div class="gradient"></div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.gradient {
	--start: tomato;
	--end: deeppink;
	width: 300px;
	height: 300px;
	background-image: linear-gradient(
	to bottom, var(--start), var(--end)
	);
  
  /* Attempt to transition CSS gradient here*/
	transition-property: --start, --end;
	transition-duration: 1s;
}

.gradient:hover {
	--start: deeppink;
	--end: blue;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.