Get your own website Result Size: 625 x 565
x
 
<!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>