Gradient Border Generator

Create your own gradient border

Border-width

Border-radius

Result

Output code:


.button-with-gradient-border {

background-image:
radial-gradient(circle at 100% 100%, transparent 9px, #d50000 9px, #d50000 10px, transparent 10px),
linear-gradient(to right, #d50000, #304ffe),
radial-gradient(circle at 0% 100%, transparent 9px, #304ffe 9px, #304ffe 10px, transparent 10px),
linear-gradient(to bottom, #304ffe, #05ffde),
radial-gradient(circle at 0% 0%, transparent 9px, #05ffde 9px, #05ffde 10px, transparent 10px),
linear-gradient(to left, #05ffde, #ffd600),
radial-gradient(circle at 100% 0%, transparent 9px, #ffd600 9px, #ffd600 10px, transparent 10px),
linear-gradient(to top, #ffd600, #d50000)


background-size:
10px 10px,
calc(100% - 20px) 1px,
10px 10px,
1px calc(100% - 20px)


background-position:
top left,top center,top right,center right, bottom right,bottom center,bottom left,center left


background-repeat:
no-repeat

}