Framer Animated Gradient Border
A free Framer component that animates a gradient border around any element — configurable thickness, colors, speed, and direction.
A free Framer component that adds an animated gradient border to any element on your canvas. Drop it into a card, a button, or a section — the gradient rotates continuously along the border, drawing attention without motion that competes with your content.
Everything is configurable from the properties panel. Set the border thickness, define the gradient colors, control the animation speed, and choose the rotation direction — clockwise or counterclockwise. Match it to your design system and it disappears into the layout as an intentional detail rather than a decorative add-on.
It renders efficiently, stays static on the Framer editor canvas to keep your workspace fast, and animates in preview and on your published site. No plugin, no external library.
Free to use. Copy the code below and paste it into a Code File in Framer.
