<div></div>
<div></div>
@property --colorPrimary {
syntax: "<color>";
initial-value: magenta;
inherits: false;
}
@property --stop {
syntax: "<percentage>";
initial-value: 50%;
inherits: false;
}
body {
/* might wanna RE-declare values as a fallback, but not necessary in supportin browsers. */
--colorPrimary: magenta;
--stop: 50%;
display: grid;
grid-template-columns: 50% 50%;
margin: 0;
}
div {
height: 100vh;
transition: --stop 0.5s, --colorPrimary 0.2s;
background: linear-gradient(
to bottom,
black var(--stop),
var(--colorPrimary)
);
}
div:hover {
--colorPrimary: red;
--stop: 80%;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.