Border Gradient with transperent end

Question

I have 4 div with border-radius 50%. They are circles. Between second and third I need to make such as speedometer with gradient. The end of gradient must be transperent and all circles must be transperent too.

Code.

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  border-radius: 50%;
  display: flex;
}

.first-circle {
  height: 400px;
  width: 400px;
  border: 2px solid gray;
}

.second-circle {
  height: 350px;
  width: 350px;
}

.third-circle {
  height: 300px;
  width: 300px;
  border: 29px solid gray;
}

.forth-circle {
  height: 250px;
  width: 250px;
  border: 2px solid gray;
}

<div style="background-color: aqua;" clss="flex-center">
  <div class="first-circle circle flex-center">
    <div class="second-circle circle flex-center">
      <div class="third-circle circle flex-center">
        <div class="forth-circle circle flex-center">
        </div>
      </div>
    </div>
  </div>
</div>

How the gray border to make the color gradient with transperent in the end(for example end on 3 hours by clock board)?

score 0 · Answer 1 · answered May 30 '20 at 22:47

0

Basically for doing things that end transparently you can use somthing like this background-image: linear-gradient(to right, red , #ffffff00);, about the circles check this link

answered May 30 '20 at 22:47

Hillel

11
4

But you did only background-image. With this style all circle is with gradient. In need gradient only for border, the circle must be transperent. – Stan Marsh May 30 '20 at 22:58
the background-image was only for example to the linear-gradient part, use it with different classes... – Hillel May 30 '20 at 23:05

Border Gradient with transperent end

1 Answers1