CSS Gradient Border Generator
Create gradient borders that work with rounded corners — set colors, angle, width, and radius with a live preview, then copy the CSS. Free.
💡 How it works
- This uses the two-background technique so the gradient border works with rounded corners (unlike
border-image). - The inner color fills the content area; the gradient shows only in the border.
- Adjust colors, angle, width, and radius — the preview updates live.
Free CSS Gradient Border Generator
Create gradient borders with CSS and copy the code in one click. Pick your colors, angle, border width, and corner radius — with a live preview that works on rounded corners. Uses the modern two-background technique, not border-image. Free, no sign-up, runs in your browser.
What is a gradient border?
A gradient border is an outline that transitions between colors instead of using one flat color — a popular way to make cards, buttons, and inputs feel modern and eye-catching. The tricky part is that the obvious CSS approach, border-image, does not respect border-radius, so gradient borders on rounded elements need a different technique. This generator uses the reliable two-background method that supports rounded corners.
How to use the generator
It is instant:
- Choose two or three gradient colors and the angle.
- Set the border width and corner radius.
- Pick the inner background color that fills the content area.
- Copy the CSS and apply it to any element.
How the two-background technique works
The element gets a transparent border and two stacked backgrounds. The first is a solid color clipped to the padding box (the inner content area), and the second is your gradient clipped to the border box (the full element including the border). Because the solid layer covers everything except the border, the gradient shows through only in the border area — and unlike border-image, this respects border-radius, so the gradient outline follows your rounded corners perfectly.
Why not just use border-image?
border-image can paint a gradient into a border, but it has a well-known limitation: it ignores border-radius, so the corners stay square even when the element is rounded. For flat-cornered elements border-image is fine, but almost every modern design uses some radius, which is why the two-background approach in this tool is the go-to method. It works across all modern browsers and keeps your rounded corners intact.
Using gradient borders effectively
Gradient borders draw attention, so use them where you want emphasis — a featured pricing card, a call-to-action button, or a focused input. Keep the gradient colors on-brand and not too saturated so the border complements rather than overwhelms the content. Make sure the inner background color matches the surface behind the element (usually white or your card color) so only the border shows the gradient, not a visible inner box.
Pro tip
Animate the gradient angle on hover for a subtle rotating-border effect, and store the gradient as a CSS variable so every gradient-bordered element stays consistent. If the element sits on a colored background, set the inner background to that same color so the fill blends in. Pair this with our CSS Gradient Generator to design the exact gradient first.
FAQ
Is this Gradient Border Generator free?
Why doesn't border-image work with rounded corners?
How do I make a gradient border in CSS?
Can I use three colors in the gradient?
Why is there a visible box inside my border?
Can I animate the gradient border?
Does this work in all browsers?
Related tools
Pro tip: pair this tool with CSS Box-Shadow Generator and CSS Gradient Generator for a faster SEO workflow.