* {
    box-sizing: border-box;
}

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

@property --gradX {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: true;
}

@property --gradY {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: true;
}
 
.wrapper {
    min-width: min(40rem, 100%);
}

.box {
    border: 2px solid;
    border-image: radial-gradient(circle at var(--gradX) var(--gradY), var(--c1), var(--c2) 100%) 30;
    animation: borderRadialSmooth var(--d) linear infinite;
} 

@keyframes borderRotate {
    0% { --angle: 0deg; }
    100% { --angle: 360deg; }
}

@keyframes borderRadialSmooth {
    0%, 100% { --gradX: 50%; --gradY: 50%; }
    25% { --gradX: 100%; --gradY: 50%; }
    50% { --gradX: 50%; --gradY: 100%; }
    75% { --gradX: 0%; --gradY: 50%; }
}

:root {
    --d: 5500ms; /* Duration of the animation */
    --angle: 90deg; /* Initial angle for the conic gradient */
    --gradX: 50%; /* Initial X position for the radial gradient */
    --gradY: 50%; /* Initial Y position for the radial gradient */
    --c1: rgba(168, 239, 255, 1); /* First color for gradients */
    --c2: rgba(168, 239, 255, 0.1); /* Second color for gradients */
}