如何为包含边界半径和透明背景的边界添加渐变？

Question

I am not sure if the questions has been yet properly asked, but I am looking for a legit answer to this problem.

I am trying to achieve the following.

• Create div with a border
• Give div a radius (make circle)
• Give border a gradient
• Keep background of div transparent

I have found examples that would allow me to create a gradient border, but in most cases the background of the div was not transparent but had a color matching the body background. example

One way that I found to add a border to your div is shown below, though this does not allow you to use border-radius and therefor keeps your div as a square, although allowing your background to be transparent, it does not allow your shape to be a circle.

border-image:linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670);
border-image-slice:1;

I have also tried to use clip-path circle, but have not found anything that works.

One last solution that struck me was to use font, I have looked for the roundest "o" in google fonts and found the font family "Josefin Sans". Used the "o" as my circle, but doing such leaves me in a bind with the width of the border. the following code below was used to achieve a gradient clip on my text.

 background: linear-gradient(to right,#23966c, #faaa54, #e23b4a, #db0768, #360670);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;  

see codepen example.

I am considering to create svg.. but if anyone has came across a solution for this please let me know.

Thank you.

Answer 1

Here is an SVG solution:

 body { background-color:#080808; animation:changebg 30s infinite; overflow:hidden; } @keyframes changebg { 0%{background-color:#23966c;} 20%{background-color:#faaa54;} 40%{background-color:#e23b4a;} 60%{background-color:#db0768;} 80%{background-color:#360670;} 100%{background-color:#23966c;} } 

 <svg width="300" height="300"> <defs> <!-- define gradient --> <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="blue" /> <stop offset="50%" stop-color="purple" /> <stop offset="100%" stop-color="yellow" /> </linearGradient> </defs> <circle r="100" cx="150" cy="150" fill="transparent" stroke="url(#grad)" stroke-width="10" /> </svg> 

By the way here is another idea using CSS but of course without transparency:

 body { background-color: pink; overflow: hidden; } .cir { width: 200px; height: 200px; margin: 20px auto; border-radius: 50%; border: 20px solid transparent; background: linear-gradient(pink, pink) padding-box, linear-gradient(to right, #23966c, #faaa54, #e23b4a, #db0768, #360670) border-box; } 

 <div class="cir"></div>