🎨
CSS Gradient Border Generator
Create beautiful gradient borders for your elements
Preview
Gradient Border
Hover me!
Presets
Gradient Type
Settings
Color Stops
0%
50%
100%
Animation
CSS Method
Generated CSS
.gradient-border {
position: relative;
background: #18181b;
border-radius: 12px;
padding: 3px;
}
.gradient-border::before {
content: "";
position: absolute;
inset: 0;
border-radius: 12px;
padding: 3px;
background: linear-gradient(90deg, #a855f7 0%, #3b82f6 50%, #06b6d4 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
.gradient-border-content {
background: #18181b;
border-radius: 9px;
padding: 1rem;
}Browser Support
- ✅ Chrome 57+
- ✅ Firefox 53+
- ✅ Safari 15.4+
- ✅ Edge 79+
- ⚠️ IE: Not supported