<!DOCTYPE html>
<html>
<head>
<style>
@property --startColor {
syntax: "<color>";
initial-value: #EADEDB;
inherits: false;
}
@property --endColor {
syntax: "<color>";
initial-value: #BC70A4;
inherits: false;
}
.ex1 {
background: linear-gradient(var(--startColor), var(--endColor));
animation: gradient 3s linear infinite;
}
@keyframes gradient {
0%,
100% {
--startColor: #EADEDB;
--endColor: #BC70A4;
}
50% {
--startColor: #BC70A4;
--endColor: #BFD641;
}
}
#grad1 {
height: 200px;
}
</style>
</head>
<body>
<h1>The @property Rule</h1>