Border gradient with radius and transparency

Question

I want to do something like this:

I want a border-radius, transparency (to see the background), and the possibility to fill from 0% to 100% the border.

For the moment, I have this code:

body{
    background: lightgrey;
}

.avatar{
    padding: 10px;
    display: inline-block;
    position: relative;
    z-index: 0;
}

.avatar:before{
    width: 180px;
    aspect-ratio: 1;
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 8px;
    border-radius: 100%;
    background: linear-gradient(to top, transparent 25%, blue 25%, blue);
    -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: clear;
    mask-composite: clear;
}

<html>
    <body>
        <div class="avatar"></div>
    </body>
</html>

How is it possible to fill X% of the border?

Thank you!

Coolis · Answer 1 · 2022-11-15T10:03:17.650

1

This is called a radial progress bar is case you want to search for more examples. Here is a small example:

div {
  display: flex;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(red var(--progress), gray 0deg);
  font-size: 0;
}

div::after {
  content: attr(data-progress) '%';
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: 10px;
  border-radius: 50%;
  background: white;
  font-size: 1rem;
  text-align: center;
}

<div data-progress="80" style="--progress: 80%;"></div>

Here is a better solution based on what you asked.

Hope that helps.

edited Nov 15 '22 at 10:03

answered Nov 15 '22 at 09:08

Coolis

511
3
17

That's brilliant, but can you please show how to create only a portion of circle as asked? – Matteo Maestri Nov 15 '22 at 09:43
1

Yes. [here](https://codepen.io/coolis6/pen/BaVdjgN) is what you are looking for. The trick here is that you have to adjust the height and the width according to your needs and the use of JavaScript to rotate the element to see the filled effect for the background. – Coolis Nov 15 '22 at 09:53
Thank you for your answer! And if I want to set the height of barOverflow to 70px instead of 45px, I have to add dynamically a border-top-color to fill more than 180°? – Valentin S. Nov 15 '22 at 10:41
Yes. That is because the bar that is filled is actually a rectangle with border-radius to make it round and border colors for the fill. Now depending on how much you set its height, its other sides will be visible. So in this case you will have to fill the border-top or border-left according to which side it will be shown. Hope it makes sense. – Coolis Nov 15 '22 at 11:01

score 1 · Accepted Answer · answered Nov 15 '22 at 15:45

1

here is an idea based on my previous answer:

.box {
  width: 100px;
  aspect-ratio: 1;
  display:inline-block;
  border-radius :50%;
  padding: 10px;
  background: conic-gradient(from -136deg, blue calc(var(--p)*.76),#f3f3f3 0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
          mask-composite:exclude;
   clip-path:polygon(0 0,100% 0,100% 100%, 50% 50%,0 100%);
}

body {
  background:linear-gradient(to right,red,yellow);
}

<div class="box" style="--p:5%;"></div>
<div class="box" style="--p:20%;"></div>
<div class="box" style="--p:50%;"></div>
<div class="box" style="--p:60%;"></div>
<div class="box" style="--p:75%;"></div>
<div class="box" style="--p:100%;"></div>

answered Nov 15 '22 at 15:45

Temani Afif

245,468
26
309
415

Nice answer! I understand the -136deg, but why the *.76? – Valentin S. Nov 16 '22 at 08:16
@ValentinS. because you don't have to fill a full circle but less than a full circle so we don't need to go to 100% but rather to 76% only. – Temani Afif Nov 16 '22 at 08:20
And do you have a solution for Firefox to remove the gradient line at the bottom? – Valentin S. Dec 07 '22 at 08:21

score 0 · Answer 3 · answered Nov 15 '22 at 09:06

try like below,

   body{
        background: lightgrey;
    }
    
    .avatar{
        padding: 10px;
        display: inline-block;
        position: relative;
        z-index: 0;
    }
    
    .avatar:before{
        width: 180px;
        aspect-ratio: 1;
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        padding: 8px;
        border-radius: 100%;
        background: linear-gradient(to top, transparent 25%, blue 25%, blue);
        -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: clear;
        mask-composite: clear;
    }
    .mainside{
        
        display: inline-block;
        position: relative;
        z-index: 0;
    }
    
    .mainside:before{
        width: 180px;
        aspect-ratio: 1;
        content: "";
        position: absolute;
        z-index: 9;
        inset: 0;
        padding: 8px;
        border-radius: 100%;
        background: linear-gradient(to right, transparent 90%, #878789 25%, #adadad);
        -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: clear;
        mask-composite: clear;
    }

    <html>
        <body>
            <div class="mainside">
                <div class="avatar"></div>
            </div>
            
        </body>
    </html>

Border gradient with radius and transparency

3 Answers3