Gradient Border Generator
Design animated CSS gradient borders and copy the code.
How to create gradient borders in CSS
CSS does not directly support gradient values for the border-color property — gradients can only be used as backgrounds. This requires one of two techniques to achieve gradient borders.
The border-image approach uses the border-image property: border-image: linear-gradient(45deg, #6366f1, #ec4899) 1;. This is simple and widely supported but has a critical limitation: it does not work with border-radius (rounded corners). The border corners will remain sharp regardless of your border-radius value.
The pseudo-element approach uses a ::before pseudo-element as the gradient background, slightly larger than the parent, positioned behind it: set the parent to position:relative;z-index:0 and create a ::before with the gradient background, position:absolute;inset:-2px;border-radius:inherit;z-index:-1. This supports border-radius but requires the element's background to be set to hide the pseudo-element in the center area.
For animated gradient borders (rotating or scrolling gradient), use CSS @keyframes to animate the gradient angle or use a rotating conic-gradient.
Common mistakes
- border-image and border-radius — They are incompatible. If you need both rounded corners and gradient borders, you must use the pseudo-element technique.
- Z-index issues with pseudo-elements — The ::before trick requires careful z-index management. The parent must have z-index:0 and a background; otherwise the gradient will show through the center.