OneTaskBy Tim King · Updated
Animated Gradient Border
Spinning Conic Gradient Border for Cards, With Up to Six Colours
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Animated Gradient Border works
This animated gradient border generator wraps a card in a ring of colour that rotates round its edge. Choose the colours, border width, corners and spin speed, then copy the HTML and CSS for a featured pricing plan, a call to action or a highlighted card.
A moving border pulls the eye to one card in a row without changing its size or layout, which is why it is popular on pricing tables and feature highlights.
How the animated gradient border works
The card has a transparent border and two backgrounds. The inner one is a flat colour clipped to the
padding-box; the outer one is a conic-gradient clipped to the border-box, so it only shows
through the border. A registered @property --gb-angle lets the browser animate the gradient's
starting angle, which makes the colours travel round the edge.
Browser support
Registered custom properties work in all current versions of Chrome, Edge, Safari and Firefox. In an older browser the border still shows the gradient but does not rotate, so nothing breaks.
FAQ
Can I use a gradient border with rounded corners?
Yes. Unlike border-image, which ignores border-radius, the two-background method follows the corner radius exactly, so the gradient curves neatly round every corner at any radius you set.
How do I make the border glow?
Add a box-shadow or a blurred copy of the gradient on a ::before layer behind the card. A shadow in one of your border colours at around 20 pixels of blur gives a soft neon glow.
Will the spinning border hurt performance?
It repaints only the card's border area each frame, which is cheap for a single card. Avoid putting it on dozens of cards at once, and it stops for visitors who prefer reduced motion.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
CSS Border Generator
Build a border shorthand with any style, side and radius.
Animated Gradient
Make a smoothly shifting gradient background in pure CSS.
Glow Effect
Neon glow for headings and buttons, pure CSS.
Gradient Maker
Linear, radial and conic CSS gradients with live preview.
Pricing Card Builder
Pricing plan cards with price, feature ticks, ribbon and CTA.