How to Create a CSS Gradient Border
CSS doesn't have a native gradient border property, but there are three reliable techniques to achieve the effect. Each has tradeoffs around border-radius support, animation, and browser compatibility. This guide covers all three so you can choose the right one for your project.
- Add gradient borders to any element using border-image, background-clip, or mask techniques.
- Covers method 1: border-image.
- Covers method 2: background-clip (recommended).
- Covers animated gradient borders.
- Covers method 3: pseudo-element mask.
Method 1: border-image
The border-image property applies a gradient directly to the border:
.card {
border: 3px solid transparent;
border-image: linear-gradient(135deg, #FF6B6B, #FFA62E) 1;
}
This is the simplest approach, but it has one major limitation: border-image doesn't work with border-radius. If you need rounded corners, use the background-clip method instead.
Method 2: background-clip (Recommended)
The background-clip technique uses two backgrounds — one for the border gradient and one for the inner fill — with padding-box and border-box clipping:
transform and opacity for smooth 60fps performance. These properties are handled by the GPU compositor and skip expensive layout recalculations..card {
border: 3px solid transparent;
border-radius: 12px;
background: linear-gradient(#0B0D17, #0B0D17) padding-box,
linear-gradient(135deg, #FF6B6B, #FFA62E) border-box;
}
This works with border-radius and is the most widely used technique. The inner background matches your card's background color, and the gradient shows through the transparent border.
Animated Gradient Borders
To animate the gradient border, use CSS custom properties with @property for the angle:
width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.@property --angle {
syntax: '
initial-value: 0deg;
inherits: false;
}
.card {
--angle: 0deg;
border: 3px solid transparent;
border-radius: 12px;
background: linear-gradient(#0B0D17, #0B0D17) padding-box,
linear-gradient(var(--angle), #FF6B6B, #FFA62E, #FF6B6B) border-box;
animation: rotate 3s linear infinite;
}
@keyframes rotate { to { --angle: 360deg; } }
This creates a continuously rotating gradient border effect. Use the Gradient Border Generator to experiment with colors and export the CSS.
Method 3: Pseudo-Element Mask
For complex gradient shapes or when you need the gradient to extend beyond a simple border, use a pseudo-element behind the card with a slightly larger size:
.card {
position: relative;
border-radius: 12px;
}
.card::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 14px;
background: linear-gradient(135deg, #FF6B6B, #FFA62E);
z-index: -1;
}
This approach is the most flexible — you can add blur, glow effects, or complex gradient patterns to the pseudo-element.
Frequently Asked Questions
Can I use border-radius with gradient borders?
How do I animate a gradient border?
What is the best method for gradient borders?
Use the Gradient Border Generator — free, no signup required.
⚡ Open Gradient Border Generator