Is it possible based on CSS to create a circle with gradient border and transparent inner?

Question

I\'m trying to create a circle with CSS that has a gradient border but also a transparent inner

Answer 1

I think the best way is linear-gradient with SVG. The idea is to create a circle and fill its stroke with a gradient.

body {
  background: url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png);
}

text {
  font-size:8em
}

That you can also use as background:

body {
  background: url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png);
}

text {
  font-size: 8em
}

#count {
  background: url('data:image/svg+xml;utf8,') no-repeat;
  text-align: center;
  color: #fff;
  font-size: 8em;
  width: 150px;
  height: 150px;
}

  7