Animated Gradient Border

1<div className="animated-border-parent m-4 flex w-80 h-80 flex-col items-center justify-center rounded-sm p-[2px]">
2  <div
3    className={clsx(
4      'animated-border-bg rounded-lg',
5      !uiLoading && 'opacity-100',
6    )}
7  >
8  </div>
9  <div className="relative z-10 w-full h-full flex flex-col items-center justify-center rounded-lg bg-slate-900">
10    Content
11  </div>
12</div>

1@layer components {
2  .animated-border-parent {
3    position: relative;
4    --color-accent: #ee6d24;
5    --color-purple: #a992e3;
6    --border-from-angle: 0deg;
7    --border-from-angle-offset: 0deg;
8    --border-color-one: transparent;
9    --border-color-two: var(--color-purple);
10    --border-color-three: var(--color-accent);
11    --border-color-four: var(--color-purple);
12    --border-from-angle: 0deg;
13  }
14
15  /** @important make the css variable animation smooth */
16  @property --border-from-angle-offset {
17    syntax: '<angle>';
18    initial-value: 0deg;
19    inherits: false;
20  }
21
22  @keyframes draw-border {
23    0% {
24      --border-from-angle-offset: 0deg;
25    }
26    100% {
27      --border-from-angle-offset: 360deg;
28    }
29  }
30
31  .animated-border-bg {
32    height: 100%;
33    width: 100%;
34    z-index: 0;
35    position: absolute;
36    top: 0;
37    background-size: cover;
38    transition: opacity 4s ease-in-out;
39    /** @note make a conic gradient background at the back. */
40    background-image: conic-gradient(
41      from calc(var(--border-from-angle) + var(--border-from-angle-offset)),
42      var(--border-color-one) 90deg,
43      var(--border-color-two) 180deg,
44      var(--border-color-three) 270deg,
45      var(--border-color-four) 1turn
46    );
47    animation: draw-border 10s linear infinite;
48    /** @note our animation is infinite, this style can be removed. */
49    animation-fill-mode: forwards;
50    opacity: 0;
51  }
52}