Question 237103 in Html Question posted in
Some basic documentation can be found here.

Html – How to make a circle with a border that has a color transition in CSS?

I have this code:

<div id="circle" style="
            width: 500px;
            height: 500px;
            border-color: gold;
            border-style: solid;
            border-bottom-style: none;
            border-left-style: none;
            border-radius: 50%;
            background-color: transparent;
            position: absolute;
        ">
</div>

that creates this image:

circle with border

How do I make the border have a gradient (e.g. going from gold to black to red)? I need to keep the center transparent so using a div inside another div isn’t really an option

Tags:

2

Answers


  1. 0

    Gradient borders do not exist as a thing in their own right. I can’t find a way to have a decent border gradient and a transparent background but if you can compromise one of the following might suffice.

    EDIT: I’ve just noticed your requirement for the gradient to go gold/black/red so option one below is out (but I’ve kept it because its actually not a bad effect).

    #demo {background:#eee;display:flex;gap:10px;}
.circle {
    --border-width: 5px;
    display:flex; justify-content:center; align-items:center;
    position:relative;
    width: 200px;
    height: 200px;
}
.attempt1 {
    border:var(--border-width) solid gold;
    border-bottom-style: none;
    border-left-style: none;
    border-radius: 50%;
    background-color: transparent;
}
.attempt1:before {
    content: "";
    position:absolute;
    inset:calc(0px - var(--border-width));    
    border-radius: 50%;
    border:var(--border-width) solid red;
    border-top-style: none;
    border-right-style: none;
}

.attempt2 {
    border:var(--border-width) solid transparent;
    border-radius: 50%;
    background-color: transparent;
    background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, gold, black, red) border-box;
}
    <div id="demo">
<div class="circle attempt1">Transparent BG<br>but naff border</div>
<div class="circle attempt2">Solid BG but good border</div>
<div>
    Login or Signup to reply.
  2. 0
    • Use a gradient background-image from transparent (#0000) to gold (#fd0) at 45 degrees
    • Clip (mask) the gradient image with a circle using CSS mask-image:
    body { background-color: #232425; } /* Just for proof of concept */

.circle {
  --strokeWidth: 4px; /* change line thickness as desired */
  width: 240px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: linear-gradient(45deg, #0000 30%, #fd0 100%);
  -webkit-mask-image: radial-gradient(circle farthest-side at center, #0000 calc(100% - var(--strokeWidth) - 1px), #fff calc(100% - var(--strokeWidth)));

}
    <div class="circle"></div>

    This way your body’s background colors or image will be visible thanks to the masking method.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search