body {
    background-color: color-mix(in oklch longer hue, white, teal);
}

@property --blend {
  syntax: '<color>';
  inherits: false;
  initial-value: color-mix(in srgb, #ff0000 50%, #0000ff);
}

.box {
  background-color: var(--blend);
  transition: --blend 1s ease;

  corner-shape: bevel;
  border-bottom-right-radius: 100% 50px;
}

.box:hover {
  --blend: color-mix(in srgb, #ff0000 80%, #0000ff);
}