How do I make a gradient border in CSS?

CSS border property doesn't support gradients directly. The workaround uses a gradient background on the element with background-clip: padding-box on an inner layer, or border-image: linear-gradient(...) which has more limited border-radius support.

Does gradient border work with border-radius?

The background-clip technique works with border-radius. The border-image technique does not — it clips to a rectangle. This tool uses the background method for full border-radius compatibility.

CSS Gradient Border Generator | Ultimate Design Tools

What Is the CSS Gradient Border Generator?

Create gradient borders on any element using the background-clip technique. Choose colors, angles, and border widths with a live preview.

Why Use This Tool?

CSS doesn't natively support gradient borders via the border property, but the double-background technique achieves the same effect. This tool generates the code for you with customizable gradient colors and directions.

How to Use This CSS Gradient Border

Pick your gradient colors — Choose two or more colors for your border gradient. Use complementary or analogous colors for the best visual results.
Set the gradient direction — Choose the angle or direction — diagonal gradients (135°) feel more dynamic than horizontal or vertical ones.
Adjust border width and radius — Set the border thickness and corner rounding to match your design. The tool generates the correct CSS using the border-image or background-clip technique.
Copy the CSS — Grab the complete CSS code — the tool outputs the most compatible technique for gradient borders.

Tips and Best Practices

→ CSS doesn't support gradient borders natively. The border-image property works but doesn't support border-radius. For rounded gradient borders, use the double-background technique with background-clip.
→ The background-clip technique. Apply your gradient as the outer background, your fill color as the inner background using background-clip: padding-box, and use padding to create the border width.
→ Gradient borders work great on cards and buttons. A subtle gradient border adds premium visual polish to card components, CTA buttons, and featured sections without heavy design effort.
→ Consider using @property for animation. With CSS @property, you can register custom properties that enable gradient border animations — making colors shift or rotate smoothly on hover.

Frequently Asked Questions

How do gradient borders work in CSS?

The technique uses two backgrounds: one solid color (clipped to padding-box) and one gradient (clipped to border-box). The gradient shows through the transparent border area, creating the illusion of a gradient border.

Can I animate gradient borders?

Yes, by animating background-position on an oversized gradient. This creates a moving gradient effect along the border. The tool generates the keyframe CSS for animated variants.

Is there a simpler alternative?

For simple cases, border-image: linear-gradient(...) works, but it doesn't support border-radius. The background-clip technique works with rounded corners.

How do I create a gradient border in CSS?+

There are two main techniques. The border-image approach uses border-image: linear-gradient(...) 1, but it doesn't support border-radius. The background-clip approach uses two backgrounds — one gradient with background-clip: border-box, one solid with background-clip: padding-box — and transparent borders to reveal the gradient underneath. This method supports border-radius.

Can gradient borders have rounded corners?+

With border-image, no — rounded corners are ignored. With the background-clip technique, yes — you can combine gradient borders with any border-radius value. This tool generates the correct CSS for rounded gradient borders.

Do gradient borders affect performance?+

Gradient borders have negligible performance impact. They're rendered by the GPU just like any other CSS gradient. The background-clip technique adds one extra background layer but has no measurable effect on rendering speed.

📖 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools