Окружность с градиентом

Question

Как создать такую окружность, как на рисунке?
На рисунке есть ещё задний фон. Можно нарисовать круг с градиентом, и с помощью :before закрыть внутреннюю часть по периметру, но как тогда показать задний фон через :before?

Answer 1

Используя пример ответа @Максим Ленский, сгенерированный генератором, можно сделать читабельный и понятный вариант:

<svg viewBox="0 0 220 220" width="220" height="220">
    <defs>
        <linearGradient id="gradient">
            <stop offset="0" style="stop-color:#0070d8" />
            <stop offset="0.5" style="stop-color:#2cdbf1" />
            <stop offset="1" style="stop-color:#83eb8a" />
        </linearGradient>
    </defs>
    <ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" />
</svg>

Answer 2

Как вариант можно использовать mask-image:

.box {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-image: linear-gradient(to right, #0B73D3, #37DAEF, #86E98E);
  -webkit-mask-image: radial-gradient(circle at center, transparent 67%, white 68%);
  mask-image: radial-gradient(circle at center, transparent 67%, white 68%);
}
body {
  background-image: url(https://www.w3schools.com/css/img_fjords.jpg);
  background-size: cover;
}

<div class="box"></div>

Но, к сожалению, поддержка браузерами оставляет желать лучшего.

Answer 3

Как обычно такими вещами занимается svg , рекомендую почитать о этой прелести, есть отличный сайт администратор которого присусвует на ruSO

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  id="svg8" version="1.1" viewBox="0 0 297 210">
  <defs
     id="defs2">
    <linearGradient
       id="linearGradient853-5-9-6">
      <stop
         id="stop849"
         offset="0"
         style="stop-color:#489c37;stop-opacity:1" />
      <stop
         id="stop851"
         offset="1"
         style="stop-color:#2a3eff;stop-opacity:0.733" />
    </linearGradient>
    <linearGradient
       gradientUnits="userSpaceOnUse"
       y2="194.94643"
       x2="171.57741"
       y1="193.43452"
       x1="136.8512"
       id="linearGradient885"
       xlink:href="#linearGradient853-5-9-6" />
  </defs>
  <g
     transform="translate(0,-87)"
     id="layer1">
    <ellipse
       ry="78.619049"
       rx="88.824409"
       cy="195.70238"
       cx="151.56847"
       id="path10"
       style="fill:none;fill-opacity:1;stroke:url(#linearGradient885);stroke-width:6;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
  </g>
</svg>

Answer 4

Можно сделать это чистым CSS без SVG, но тогда придётся явно задавать цвет фона для картинки:

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  /* Явно задаём белый цвет */
  background-color: white;
}
div:after {
  content: "";
  background: linear-gradient(#0070d8, #2cdbf1, #83eb8a);
  position: absolute;
  left: -5px;
  right: -5px;
  top: -5px;
  bottom: -5px;
  border-radius: 50%;
  z-index: -1;
}

<div></div>

Answer 5

Можно использовать ответ @ArtemGorlachev и немного его модифицировать для того, чтобы он растягивался под произвольный блок:

<svg viewBox="0 0 220 220"  width="100%" height="100%" preserveAspectRatio="none">
    <defs>
        <linearGradient id="gradient">
            <stop offset="0" style="stop-color:#0070d8" />
            <stop offset="0.5" style="stop-color:#2cdbf1" />
            <stop offset="1" style="stop-color:#83eb8a" />
        </linearGradient>
    </defs>
    <ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" />
</svg>

Можете сделать SVG либо отдельным файлом (предпочтительный способ), либо как часть значения background (представленный ниже код будет работать только в webkit браузерах):

div {
  width: 250px;
  height: 250px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 220" width="100%" height="100%" preserveAspectRatio="none"><defs><linearGradient id="gradient"><stop offset="0" style="stop-color:#0070d8" /><stop offset="0.5" style="stop-color:#2cdbf1" /><stop offset="1" style="stop-color:#83eb8a" /></linearGradient></defs><ellipse ry="100" rx="100" cy="110" cx="110" style="fill:none;stroke:url(#gradient);stroke-width:6;" /></svg>');
}

<div></div>

Для того, чтобы код работал в MS Edge и Firefox символы внутри url должны быть escaped после кодировки utf8, для них результат с учётом обходного пути (замена двойных кавычек на одинарные, # на %23 и % на %25) будет выглядет так:

div {
  width: 250px;
  height: 250px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' width='100%25' height='100%25' preserveAspectRatio='none'><defs><linearGradient id='gradient'><stop offset='0' style='stop-color:%230070d8' /><stop offset='0.5' style='stop-color:%232cdbf1' /><stop offset='1' style='stop-color:%2383eb8a' /></linearGradient></defs><ellipse ry='100' rx='100' cy='110' cx='110' style='fill:none;stroke:url(%23gradient);stroke-width:6;' /></svg>");
  background-size: 100% 100%; /* Фикс для Firefox, чтобы изображение корректно растягивалось */
}

<div></div>