CSS Gradient Border Generator (Free & Animated)

Build a linear, radial, or conic gradient border, add a rotating animation if you want one, and copy the finished CSS — no manual border-image math required.

How CSS gradient borders work

A gradient border isn’t a real border — it’s two layered backgrounds clipped to different boxes. The trick sets border: [width] solid transparent, then paints a solid color into the padding-box and a gradient into the border-box, so the transparent border reveals the gradient underneath.

This approach beats the older border-image: linear-gradient(...) method for one practical reason: border-image ignores border-radius, so rounded gradient borders come out square no matter what. The background-clip technique respects border-radius fully, which is why it’s the standard approach for gradient buttons and cards today.

How to animate a gradient border with CSS

Animating a gradient border means rotating its angle, not moving its colors. Because a plain CSS gradient angle is just a number, browsers can’t smoothly animate it on their own — a @keyframes rule jumping between two angle values will just snap partway through instead of easing.

The @property rule fixes this by registering the angle as a real, animatable custom property:

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

Once the browser knows --gradient-angle is an <angle> type, animating it in @keyframes produces a smooth, continuous spin instead of a jump cut. This is exactly what the tool above generates for you.

Browser support: @property works in every current version of Chrome, Edge, Firefox, and Safari. On older browser versions that don’t support it, the gradient border still displays correctly — it just stays static instead of rotating, so nothing breaks.

Where gradient borders get used

• Buttons and call-to-action elements — a gradient border draws the eye to a primary action without the visual weight of a filled gradient background.
• Cards and highlighted content blocks — useful for pricing tables, featured posts, or “recommended” callouts where one card needs to stand out from its siblings.
• WordPress button and card blocks — the generated CSS drops straight into a Custom HTML block, an Additional CSS class in Gutenberg, or a custom CSS module in Elementor, without needing a plugin.

FAQ

Can you animate a gradient border with CSS only?
Yes. Pairing @property with @keyframes lets you animate the gradient’s angle directly in CSS, with no JavaScript needed for the rotation itself.

Does a gradient border work with border-radius?
Yes, as long as it’s built with the background-clip: padding-box / border-box technique. The older border-image approach does not support border-radius, which is why rounded gradient borders often look broken when built that way.

How do I make a rotating gradient border in CSS?
Register the angle as a custom property with @property, reference that property inside the gradient’s angle value, then animate the property from its starting angle to itself plus 360 degrees in a @keyframes rule.

Why doesn’t my gradient border show rounded corners?
This almost always means the border was built with border-image instead of the background-clip technique. Switching to border: solid transparent with two layered backgrounds resolves it.

Is @property supported in all browsers?
It’s supported in all current major browsers — Chrome, Edge, Firefox, and Safari. Very old browser versions will show a static gradient border instead of an animated one, but the border itself still renders correctly.