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

Set the color of the inner div to match the surrounding background and populate the inner div with data that is vertically and horizontally aligned to the middle (there are many ways to do that, I'm doing it in a "down and dirty" way here).

#cont{
background: -webkit-linear-gradient(left top, crimson 0%, #f90 100%);
width: 150px;
height: 150px;
border-radius: 1000px;
padding: 5px;
}

#box{
background: url(http://blogs.taz.de/hausblog/files/2017/12/20171208_FB_reuters2.png);
width: 150px;
height: 150px;
border-radius: 1000px;
text-align:center;
font-size:7em;
color:#FFF;
display:table-cell;
vertical-align:middle;
font-family:Calibri, Arial, Helvetica, sans-serif;
}

#example {

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

<div id="example">
<div id="cont">
<div id="box">7</div>
</div>
</div>

Answer 2

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
}

<svg viewBox='0 0 200 200' width=150 height=150>
  <!-- define the gradient -->
  <defs>
    <!-- x1,y1,x2,y2 are used to define the gradient direction -->
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="60%">
      <!-- start color at 0%-->
      <stop offset="0%"   stop-color="crimson"/>
      <!-- end color at 100%-->
      <stop offset="100%" stop-color="#f90"/>
    </linearGradient>
  </defs>
  <!-- Create an svg circle at [100,100] with radius of 90
       make the border-width 6 (stroke-width) fill it with gradient (stroke)
       and make the content of circle transparent (fill)
  --->
  <circle cx="100" cy="100" r="90" stroke="url(#linear)" stroke-width="6" fill="transparent" />
  <!-- Create a text element at the postion [70,140] -->
  <text x="70" y="140" fill="white">7</text>
</svg>

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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="150" height="150"><defs><linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="60%"><stop offset="0%"   stop-color="crimson"/><stop offset="100%" stop-color="%23f90"/></linearGradient></defs><circle cx="100" cy="100" r="90" stroke="url(%23linear)" stroke-width="6" fill="transparent" /></svg>') no-repeat;
  text-align: center;
  color: #fff;
  font-size: 8em;
  width: 150px;
  height: 150px;
}

<div id="count">
  7
</div>