<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')
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.