Tweak the controls on the right; the border and animation respond instantly.
Reading is my favorite hobby. Every evening after finishing my homework, I dive into a storybook. Books open up wonderful worlds for me — I get to know different people and visit beautiful places. Whenever I feel tired or down, reading always relaxes and cheers me up.
This card uses a custom gradient palette: purple, pink, and blue.
You can change the colors via the gradient-colors attribute.
Smaller border width and corner size. The animation is also slower (2 seconds per revolution).
This component starts with the animation paused. Use the button below to control the animation.
A product card with an animated flowing gradient border
Set the content background via the CSS variable --gradient-border-bg
and pair it with cool-tone gradients for a perfect dark-mode look.
Senior Frontend Engineer · Open Source Enthusiast
React / Vue / Web Components enthusiast, focused on UI component library design and performance optimization.