@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 180deg;
}

body{
  display: grid;
  place-items: center;
  font-family: sans-serif;
  height: 100vh;
}

div{
  font-size: 1.5rem;
  padding: 3rem;
  color: white;
}

.card--gradient-2 {
  --angle: 180deg; /* 👈 browser coverage */
  --color-bg: #282a36;
  background: 
    linear-gradient(var(--color-bg), var(--color-bg)) padding-box,
    linear-gradient(var(--angle), #802DCD, #F7943E) border-box;
  border-radius: 2rem;
  border: 4px solid transparent;
  transition: --angle 500ms;
}
/* rotate the border on hover */
.card--gradient-2:hover{
    --angle: 0deg;
}