About the CSS Gradient Border Generator
What is a gradient border?
CSS has no way to put a gradient in the border-color property. Borders take a color, and a gradient isn't one. So every gradient border you've seen is a workaround, and the workaround you pick decides whether your rounded corners survive.
The old answer was border-image, which does accept a gradient but ignores border-radius entirely, so your carefully rounded card comes back with square corners. The modern answer is to make the border transparent and paint two backgrounds underneath it, one clipped to the padding box and one to the border box. The gradient shows only where the transparent border is, and the corners round properly. That's what this tool generates, along with a masked variant for when you want the middle to stay see-through.
How to Use This Tool
- Pick a preset. Sunset and Ocean are standard cards. Pill on dark, Conic ring and See-through show the range.
- Set your stops. Two colors is the usual case. A conic gradient with the first color repeated at the end closes the loop without a visible join.
- Choose width and radius. Anything from 1px for a hairline to 20px or more for a chunky frame.
- Decide about the middle. Leave it solid and set the inside color to match your page, or turn on See through the middle to let the background show.
- Copy it. CSS, an SCSS mixin, a Tailwind class or a JS style object.
Common Use Cases
A gradient edge draws attention to one element without filling it with color, so it's usually about marking something as special.
- Featured pricing cards: The recommended plan gets the gradient edge, the others stay plain.
- Outline buttons: A gradient border with a transparent middle, sitting over a hero image.
- Avatar rings: A conic gradient around a circular image, the treatment stories UI made familiar.
- Focus and active states: A brand gradient replacing a flat outline on the selected item.
- Section dividers and callouts: A thick gradient edge on one side of a quote or note block.
The same colors work well elsewhere. The CSS Gradient Text Generator puts them inside the heading, the CSS Gradient Generator fills the box behind it, and the CSS Border Radius Generator handles the corner shape. Or browse all our free developer tools.
Frequently Asked Questions
Why not just use border-image?
border-image does take a gradient and it's one line shorter, but it completely ignores border-radius. Set both and you get a gradient border with square corners, which is almost never what you want. It also can't be combined with a background color on the same element without more work. The two-background technique this tool generates has neither problem.
Why does the inside color have to match my page?
In the solid version, the inner background is a real painted color sitting inside the border. If your card is on a light gray page and you leave the inside white, you'll see a white block with a gradient edge rather than a gradient-edged card. Match it to whatever the element sits on, or switch on See through the middle and let the real background show.
How does the see-through version work?
It paints the gradient across the whole border box, then uses two masks to cut the middle out. One mask covers the padding box, the other covers everything, and compositing them with exclude leaves only the difference, which is the border area. It's a well-worn trick and it works in current browsers, but it needs the -webkit- mask properties for Safari, which the generated code includes.
Can I animate the gradient border?
Yes. The cheapest approach is to animate the angle by putting the gradient in a registered custom property with @property, which lets the browser interpolate an angle smoothly. Without that, animating a gradient means repainting it every frame, which is fine for a single card on hover but not for a list. The conic option is the one people usually animate, since rotating it produces the spinning-border effect.
Does this work on buttons and inputs?
On buttons, yes, with one caveat. Buttons have a default border and background from the browser, so set both explicitly or the gradient may not show. Inputs are trickier because some mobile browsers restyle them aggressively, and the mask version can interfere with focus rings. For form controls it's usually safer to use the solid-middle version and keep a clear separate focus style.
Will the gradient follow the corner curve?
Yes, and that's the point of this technique. Because the gradient is a background clipped to the border box, it follows whatever border-radius you set, including a fully rounded pill or circle. Turn the radius up and the color keeps flowing around the curve rather than being cut off at square corners.
