Why not just use border-image for a gradient border?

border-image can paint a gradient border, but it doesn't respect border-radius — the corners stay square. This generator uses the padding-box/border-box background trick instead: a transparent border plus two stacked backgrounds (a solid fill clipped to padding-box, a gradient clipped to border-box), which lets border-radius round the whole thing cleanly.

How does the double-background trick actually work?

background accepts a comma-separated list of layers, each with its own background-clip. The first layer — a solid-color gradient clipped to padding-box — paints only the inside of the element, stopping at the border's inner edge. The second layer — your color gradient clipped to border-box — paints the full box, but since the first layer sits on top and covers everything except the transparent border ring, only that ring shows the gradient.

How does the Animate gradient toggle work?

It enlarges the border-box gradient layer to 300% of the element's size with background-size, then animates background-position back and forth across it with @keyframes. Since the gradient is bigger than its box, sliding its position streams a different slice of colors through the border ring, reading as a flowing gradient rather than a static one — the padding-box layer underneath stays fixed so only the border animates.

Is there a different animated border style on this site?

Yes — if you want a spinning ring of light instead of a flowing linear gradient, the Animated Glowing Border Generator uses a rotating conic-gradient with a blur filter for a glow effect, which is a different look from this tool's sliding linear gradient.

Does this work with a transparent or image page background behind the card?

Yes — the trick only depends on the two background layers on the element itself; it doesn't need to know or match the color behind it, since the inner solid layer covers the card's own content area regardless of what's behind the element.

Is my color and layout choice sent anywhere?

No — everything here is computed and rendered locally in your browser. Nothing is uploaded to a server.

CSS GRADIENT BORDER GENERATOR

Build a rounded gradient border with any angle and color stops, then copy the CSS.

Gradient border

Gradient colors

Angle: 135deg

Border width: 4px

Radius: 16px

Inner background

Animate gradient

.gradient-border {
  border: 4px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#201d19, #201d19) padding-box,
    linear-gradient(135deg, #ff6a35, #ffe17d, #4ac8ff) border-box;
}

How to build a gradient border

1
Add or remove gradient color stops and pick their colors.
2
Adjust the gradient angle, border width, and corner radius on the live preview.
3
Pick an inner background color to match your card or button, and turn on Animate gradient for a flowing border.
4
Copy the generated CSS and apply the class to your element.

Questions

Why not just use border-image for a gradient border?: border-image can paint a gradient border, but it doesn't respect border-radius — the corners stay square. This generator uses the padding-box/border-box background trick instead: a transparent border plus two stacked backgrounds (a solid fill clipped to padding-box, a gradient clipped to border-box), which lets border-radius round the whole thing cleanly.
How does the double-background trick actually work?: background accepts a comma-separated list of layers, each with its own background-clip. The first layer — a solid-color gradient clipped to padding-box — paints only the inside of the element, stopping at the border's inner edge. The second layer — your color gradient clipped to border-box — paints the full box, but since the first layer sits on top and covers everything except the transparent border ring, only that ring shows the gradient.
How does the Animate gradient toggle work?: It enlarges the border-box gradient layer to 300% of the element's size with background-size, then animates background-position back and forth across it with @keyframes. Since the gradient is bigger than its box, sliding its position streams a different slice of colors through the border ring, reading as a flowing gradient rather than a static one — the padding-box layer underneath stays fixed so only the border animates.
Is there a different animated border style on this site?: Yes — if you want a spinning ring of light instead of a flowing linear gradient, the Animated Glowing Border Generator uses a rotating conic-gradient with a blur filter for a glow effect, which is a different look from this tool's sliding linear gradient.
Does this work with a transparent or image page background behind the card?: Yes — the trick only depends on the two background layers on the element itself; it doesn't need to know or match the color behind it, since the inner solid layer covers the card's own content area regardless of what's behind the element.
Is my color and layout choice sent anywhere?: No — everything here is computed and rendered locally in your browser. Nothing is uploaded to a server.