<div class="notice" id="notice">This is a CSS Houdini demo. In order to see something interesting, enable CSS Houdini through <code>chrome://flags</code> and enable <code>Experimental Web Platform features</code></div>
<div class="wrapper">
  <div class="gradient"></div>
</div>
.notice {
  font-family: sans-serif;
  background-color: rebeccapurple;
  color: white;
  padding: 8px;
  line-height: 1.5;
}

.hidden {
  display: none;
}

.wrapper {
  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;
}
if ('registerProperty' in CSS) {
  CSS.registerProperty({
    name: '--start',
    syntax: '<color>',
    inherits: true,
    initialValue: 'black'
  });
  
  CSS.registerProperty({
    name: '--end',
    syntax: '<color>',
    inherits: true,
    initialValue: 'black'
  });
  
  document.getElementById('notice').classList.add('hidden')
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.