Generate CSS gradient borders with live preview. Supports border-radius using the background-clip technique.
Gradient Settings
Start
End
border-radius only works with the background-clip method.
Used in the background-clip method to fill the element interior.
Live Preview
border-image (square only)
Your Element
background-clip (with border-radius)
Your Element
border-image(no border-radius)
.element {
border: 3px solid transparent;
border-image: linear-gradient(90deg, #6366f1, #ec4899) 1;
/* Note: border-radius does not work with border-image */
}background-clip(supports border-radius)
.element {
border: 3px solid transparent;
border-radius: 12px;
background:
linear-gradient(#ffffff, #ffffff) padding-box,
linear-gradient(90deg, #6366f1, #ec4899) border-box;
}