The CSS Gradient Border Generator creates a border with a gradient that keeps its rounded corners — something a plain border cannot do. Set the border width, corner radius, the two gradient colours and angle, and the inner fill colour, watch it update live, and copy the CSS.
It uses the padding-box / border-box background technique, which paints the gradient in the border area and a solid colour inside, so rounded corners work perfectly. Start from a preset like Sunset, Ocean, or Grape and adjust from there. Everything runs in your browser.
How to use the gradient border generator
- Pick a preset, or choose your two gradient colours and the angle.
- Set the border width and corner radius, and pick the inner fill colour.
- Copy the generated CSS and apply the .gradient-border class to your element.
- Make sure the inner fill colour matches your element’s background so only the border shows the gradient.
Why gradient borders need a trick
The border-color property only accepts solid colours, not gradients. The common border-image approach can paint a gradient border but it ignores border-radius, so the corners stay square. To get a gradient border with rounded corners, this tool layers two backgrounds: a solid colour clipped to the padding-box (the inside) and the gradient clipped to the border-box (which includes the border area). With a transparent border on top, only the gradient shows through the border ring.
Choosing the inner colour
The inner fill sits inside the border and should usually match the background the element sits on, so the card looks like it has only a gradient outline. If you want a filled card, set the inner colour to your card background; if the element sits on white, keep it white. For a “glass” look you can layer this over a blurred background, though the inner fill here is a solid colour by design for crisp, predictable results.
Animating the gradient
Because the gradient is a background layer, you can animate it — for example by animating background-position or the gradient angle with @property — to create moving or glowing borders. Keep the border width a few pixels for a subtle outline, or increase it for a bold frame. The corner radius is independent, so you can pair a thick border with tight or fully rounded corners.
Frequently Asked Questions
Why can’t I just use a gradient in border-color?
border-color only accepts solid colours. Gradients are not valid there, which is why a background-based technique is needed to fake a gradient border.
How do I get rounded corners on a gradient border?
Use the padding-box / border-box background technique this tool generates. Unlike border-image, it respects border-radius, so the gradient border follows the rounded corners.
What should the inner colour be?
Set it to match the background behind the element so only the border shows the gradient, or set it to your card’s fill colour if you want a filled card with a gradient outline.
Can I animate the gradient border?
Yes. Since the gradient is a background layer, you can animate its position or angle to create moving or glowing border effects.
Does this work in all browsers?
Yes. Multiple backgrounds with padding-box and border-box clipping are supported in all modern browsers, so the generated CSS works everywhere.