<div class="container">

  <div class="custom">With Custom Property</div>

  <div class="no-custom">Without custom Property</div>

</div>

.container {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-gap: 1rem;

}

​

.custom,

.no-custom {

  height: 80dvh;

  font-size: 2rem;

  font-family: sans-serif;

  display: flex;

  align-items: center;

  justify-content: center;

}

​

@property --percentage {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 20%;

}

​

@property --color {

  syntax: "<color>";

  inherits: false;

  initial-value: red;

}

​

.custom {

  transition: --percentage 0.5s, --color 1s;

  background: linear-gradient(var(--color) var(--percentage), transparent);

}

​

.custom:hover {

  --percentage: 100%;

  --color: green;

}

​

.no-custom {

  background: linear-gradient(red 20%, transparent);

  transition: background 0.5s;

}

​

.no-custom:hover {

  background: linear-gradient(green 100%, transparent);

}

​