Guides · · Maxwell Prehoda
11 Border Animation Examples, From Spinning Gradients to Border Beams
Most animated borders you see today are one of four techniques. A conic gradient whose angle turns, driven by a registered `@property` so the browser can interpolate it. A short beam or comet that travels the edge, either along an `offset-path` or as a narrow arc of that same conic gradient. A dashed SVG outline whose `stroke-dashoffset` moves, which gives you marching ants and self-drawing borders. And pseudo-element outlines that grow, ripple or trim on hover. Since `@property` reached Baseline in July 2024, the first two work in every major engine without JavaScript.
Below are 11 examples: the articles and libraries that defined each technique, a 1980s classic that still ships in every image editor, and three of ours built for real product moments. Every demo is a pure-CSS snippet from our Border Animations directory that you can copy.
1. Bramus: animating a CSS gradient border: Best for understanding the rotating conic border from scratch
Platform: CSS tutorial, free
Bramus Van Damme's January 2021 post is one of the clearest early write-ups of the rotating gradient border most sites now use. Register `--angle` with `@property` as an `<angle>` with an initial value of `0deg`, use it in `conic-gradient(from var(--angle), ...)` as the `border-image`, and animate `--angle` to `360deg`. Without registration the browser cannot interpolate a custom property, so the gradient would jump instead of turn.
Two details make it look right: a conic gradient instead of a radial one, so each colour runs the full width of the border, and the first colour repeated at the end so the loop has no seam. When the post was written only Chromium supported `@property`; web.dev announced it as Baseline across all three engines on 9 July 2024.
Our Rotating Gradient Border below uses the same registered angle, with padding-box and border-box backgrounds instead of border-image so the rounded corners stay clean.
Watch out for: border-image ignores border-radius, which is why the original demos have square corners. Use the two-background or mask technique when you need rounded boxes.
2. Magic UI Border Beam: Best for React landing pages for AI and developer tools
Platform: React + Motion, shadcn registry, MIT license
Magic UI is an open source library of animated components (about 23k GitHub stars, MIT), and Border Beam is its best-known piece: an animated beam of light that travels along the border of its container. The props are the whole design: `size` 50, `duration` 6 seconds, `colorFrom` `#ffaa40`, `colorTo` `#9c40ff`, plus `delay` and `reverse`. You add it with the shadcn CLI.
Its source is a neat example of modern CSS doing the geometry. The beam is a small gradient element moved with Motion along `offset-path: rect(0 auto auto 0 round ...)` by animating `offsetDistance`, and a pair of masks with `mask-intersect` clips everything to the border ring, so the beam can never leak into the content.
If you do not want React or Motion for this, our Border Beam below gets the same look in CSS: a narrow conic arc on an `@property` angle, masked to the edge and given a glow.
Watch out for: A six-second loop on every card turns a landing page into a light show. Use one beam per screen, on the element you want clicked.
3. Magic UI Shine Border: Best for a quiet shimmer on cards and sign-in forms
Platform: React, shadcn registry, MIT license
Shine Border is the calmer sibling: an animated background border effect with a `borderWidth` of 1px, a `duration` of 14 seconds and a `shineColor` that takes one colour or an array. Under the hood it is a radial gradient at 300 percent size whose background-position animates, cut down to the border with a `mask` using `exclude` composition.
The long default duration is the lesson. A shine that crosses the border every 14 seconds reads as a material catching light; the same effect at two seconds reads as a loading state. The source also gates the animation behind `motion-safe`, so it stops for users who prefer reduced motion.
Our Shine Border below is the pure-CSS version: a bright glint sweeps across a gradient border every few seconds, with a faint sheen crossing the box behind it.
Watch out for: Animating background-position repaints the layer each frame. It is cheap at 1px on a few cards and noticeably heavier on large, full-width panels.
4. Aceternity UI Moving Border: Best for call-to-action buttons that need to stand out
Platform: React, shadcn registry
Aceternity's Moving Border is a border that moves around its container, aimed at making buttons stand out. It has two props worth knowing, `duration` (2000 ms by default) and `borderRadius` (1.75rem), and installs through the shadcn CLI like Magic UI's components.
Two seconds per lap is fast. That is deliberate for a single CTA, where the motion is the point, and a good reminder that the right speed for a border depends on how many of them are on screen.
Our Snake Border below is a CSS take on a travelling line: a line with a fading tail runs around the box and turns every corner, with four edge spans sharing one clock so the head never jumps.
Watch out for: Aceternity sells an All-Access tier alongside its free components. Check the license that applies to each component before you ship it in a commercial product.
5. Hover.css border transitions by Ian Lunn: Best for classic hover outlines on links and buttons
Platform: CSS, Sass or LESS; MIT for open source
Hover.css is a long-running collection of CSS hover effects, and its Border Transitions section is a catalogue of everything a border can do on hover: Border Fade, Hollow, Trim, Ripple Out, Ripple In, Outline Out, Outline In, Round Corners, underlines from the left, centre and right, overlines, and reveals.
Each one is a class you add to an element, which makes it a fast way to try ten treatments on a real button and keep the one that fits. Ripple Out, an outline that expands and fades, is the one that survives best in product UI because it confirms the hover without moving the button itself.
Our Ripple Border below plays the same ripple on a loop: each ring is an outline on a pseudo-element with a growing `outline-offset`, so it keeps the rounded corners.
Watch out for: The MIT license covers personal and open source use only; selling an application that uses Hover.css needs a paid commercial license.
6. Marching ants, from MacPaint: Best for selection, crop and drag-and-drop UIs
Platform: Design pattern since the 1980s
The oldest animated border still in daily use. Bill Atkinson created the marching ants effect, and it was first widely used in MacPaint, which he wrote: a dashed selection outline whose segments move, so you can always see where the selection is, even over a busy image. He reportedly got the idea from the animated waterfall on an electric Hamm's Beer sign.
Almost every image editor still uses it, and the web version is a dashed SVG stroke whose `stroke-dashoffset` animates. It is the right border for any UI where the user has selected an area: a crop tool, a canvas selection, a drop zone that is ready to receive a file.
Our Marching Ants Border below draws the two-tone dashes on an SVG rect with `pathLength`, so the loop has no seam, and adds resize handles on every corner and edge.
Watch out for: A CSS dashed border cannot animate its dashes. Use an SVG rect or a repeating-linear-gradient background, or the ants will stand still.
7. Chris Coyier: how SVG line animation works: Best for borders that draw themselves around a box
Platform: CSS-Tricks article, SVG + CSS
Chris Coyier's 2014 CSS-Tricks article explains the trick behind every self-drawing outline: set `stroke-dasharray` to at least the length of the path so one dash covers the whole shape, set `stroke-dashoffset` to the same value to hide it, then animate the offset to 0. `getTotalLength()` gives you the exact length, and a commenter's tip still holds: setting `pathLength` on the path keeps the numbers consistent across browsers.
Applied to a border, it turns a box outline into a pen stroke, which is ideal for highlighting a step in a tutorial, framing a newly added item or showing that a form section is complete.
Our Self-Drawing Border below uses an SVG rect with `pathLength` set to 100, so the dash maths becomes percentages of the perimeter: a pen draws the outline, holds, and its tail chases the head away.
Watch out for: Use fill-mode forwards (or a final state in CSS) so the drawn border stays visible. Without it the outline vanishes the moment the animation ends.
8. WebKit: background-clip border-area: Best for gradient borders with see-through middles
Platform: CSS, Safari 18.2 first
Jen Simmons' November 2024 post on the WebKit blog introduced `background-clip: border-area`, which paints a background only inside the border. Give the box a transparent border, a gradient background, `background-origin: border-box` and `background-clip: border-area`, and you get a gradient border with an empty middle, no nine-slice `border-image` and no masking.
That is the cleanest answer yet to a request designers make constantly: a glowing gradient outline on a card that sits over a photo or a patterned background, where the inside must stay transparent.
Our Transparent Gradient Border below gets the same result in every browser today a different way: a mask with `mask-composite: exclude` cuts the inside out of a rotating conic-gradient layer.
Watch out for: When the post was published the feature was in the Safari 18.2 beta and Technology Preview. Check support before relying on it, and keep the mask technique as the fallback.
9. Our Chat Input Border Beam: Best for AI chat composers and prompt fields
Platform: Motions directory, free, pure CSS Ours
A chat composer with two coloured beams circling its edge and a glow leaking out behind them, brighter while the field has focus. It is one conic layer on an `@property` angle, masked to the rim and blurred, so it costs one animated custom property.
This is where an animated border earns its place in product UI: it tells you the field is the thing to use, and the focus state makes it react to you. For the other states of an AI interface see our AI thinking animation examples and the AI Animations directory.
Watch out for: Keep the beam calm while the user is typing. A fast, bright loop beside the text cursor makes long prompts harder to write.
10. Our Pricing Card Glow Border: Best for the featured plan on a pricing page
Platform: Motions directory, free, pure CSS Ours
The featured plan on a pricing page: a beam of light circles the card, a soft glow follows it outside the edge and a Most popular pill rides the top border. One `@property` angle drives both the beam and the glow, so they never drift apart.
Pricing is one of the few places a constantly moving border is justified, because the whole job of the page is to make one option the obvious choice. Leave the other plans static so the contrast does the work. For lit borders without motion, browse the Glowing Borders collection.
Watch out for: Do not let the glow push the card's text contrast below 4.5:1, and stop the loop under prefers-reduced-motion while keeping the static highlight.
11. Our Deploy Status Border: Best for build, upload and long-running task states
Platform: Motions directory, free, pure CSS Ours
A deploy card whose dashed border marches while it builds, then closes into a solid green line with a glow as the status flips to Ready. One SVG rect animates dash length, offset and colour, so the border is the progress indicator.
It borrows the marching ants meaning (this is active, something is happening) and resolves it into a clear end state. That ending is what most status borders miss: an animation that never stops gives no signal that the work is done. Our Upload Progress Border does the same for uploads with a percentage.
Watch out for: Pair the border with a text status. Colour and motion alone do not tell a screen reader, or a colour-blind user, that the build passed.
How to choose a border animation
Match it to what the border means
Attention on one element (a CTA, a featured plan, an AI prompt field): a rotating gradient or a beam, such as Border Beam. Selection or a ready drop target: marching ants. Progress or a running task: a dashed border that resolves into a solid one, like the Deploy Status Border. Hover feedback: a short, one-shot outline ripple or trim in the Hover.css family.
Match it to your stack
Plain CSS: a registered @property angle with a conic gradient, masked or clipped to the border. React with shadcn: Magic UI's Border Beam and Shine Border or Aceternity's Moving Border. Self-drawing outlines: SVG with pathLength and stroke-dashoffset. Transparent middles: a mask with mask-composite exclude today, background-clip: border-area where supported. Every one of these is in our Border Animations directory as copyable CSS.
Match it to how many are on screen
One animated border on a screen draws the eye; five cancel each other out and cost GPU time. Animate a single custom property or opacity rather than box-shadow, use slower loops for ambient effects (Magic UI's 6 and 14 second defaults are a good guide), and stop or freeze the loop under prefers-reduced-motion while keeping the static colour.
Add one animated border this afternoon
Pick the single element on your page that most needs a click or a glance, usually the primary CTA, the featured plan or the main input. Give it a conic-gradient border on a registered @property angle with a 4 to 8 second loop, and leave everything else static. Check it on a phone, and check that it stops for reduced motion.
Copy a ready one from the Border Animations directory, or describe the border you want and get production-ready CSS from the creator. For lit outlines in a retro style, see our neon effect examples.
Make a pure CSS animated border for the primary pricing card on a dark page. Use a registered @property angle driving a conic-gradient from violet to amber, 2px wide, with rounded 16px corners kept clean via padding-box and border-box backgrounds. One lap every 6 seconds, linear, with a soft blurred glow following the bright arc. Keep the card's content area untouched and text contrast at 4.5:1. Under prefers-reduced-motion, freeze the gradient at a fixed angle.
Common questions
How do you animate a border in CSS?
For a rotating gradient border, register a custom property with @property as an angle, use it in conic-gradient(from var(--angle), ...) on a background clipped to the border box, and animate the angle from 0deg to 360deg. For moving dashes, animate stroke-dashoffset on an SVG rect. For hover effects, transition a pseudo-element's outline, scale or outline-offset.
Why does my gradient border animation jump instead of rotating?
The custom property is not registered. Browsers cannot interpolate an unregistered custom property, so they swap values at the midpoint. Register it with @property as an angle type, inherits false and an initial value of 0deg. @property became Baseline in July 2024.
How do I make a gradient border with rounded corners?
Do not use border-image, which ignores border-radius. Instead use two backgrounds, a solid one clipped to the padding-box and the gradient clipped to the border-box, with a transparent border. Or put the gradient on a pseudo-element and mask out the middle with mask-composite: exclude.
What is a border beam?
A short streak of light that travels around an element's border, popular on AI and developer tool sites. Magic UI's Border Beam moves a small gradient along offset-path with Motion; a pure-CSS version uses a narrow arc of a conic gradient on a rotating @property angle, masked to the border.
Are animated borders bad for performance?
Animating a single registered custom property or opacity is cheap. Animating box-shadow, blur radius or background-position on large elements repaints every frame and can stutter on phones. Keep animated borders to a few elements and use slow loops for ambient effects.