Как реализовать такой градиент

Question

Как реализовать такой градиент Есть свойства градиента

background-image: linear-gradient(to right,transparent 77%,#d7d8df 0 100%), linear-gradient(to right,#8fde90,#b6cf74,#e3be54,#F41840);

background: linear-gradient(to right,transparent 33%,#ffffff 33%);

Answer 1

:root {
  font-size: 0px;
}

.wrap-lg {
  width: 200px;
  height: 200px;
  border-radius: 100%;
}

.quarter {
  width: 50%;
  height: 50%;
  display: inline-block;
  font-size: 0;
  background: black;
  overflow: hidden;
}

#center {
  width: 80%;
  height: 80%;
  background-color: white;
  position: relative;
  border-radius: 100%;
  margin: 10%;
  left: 0px;
  top: -100%;
}

.quarter::after,
.quarter::before {
  content: "";
  display: block;
  filter: blur(3px);
}

#lt {
  border-radius: 100% 0 0 0;
  background: linear-gradient(45deg, #ffb507 0%, #ff9800 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#lt::before {
  width: 20%;
  height: 90%;
  margin-left: 90%;
  background-color: #FF9800;
}

#lt::after {
  width: 20%;
  height: 20%;
  background-color: #ffc107;
}

#rt {
  border-radius: 0 100% 0 0;
  background: linear-gradient(135deg, #ff9800 0%, #ff0000 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#rt::before {
  width: 20%;
  height: 90%;
  margin-left: -10%;
  background-color: #FF9800;
}

#rt::after {
  width: 110%;
  height: 20%;
  background-color: #ff0000;
}

#lb {
  border-radius: 0 0 0 100%;
  background: linear-gradient(135deg, #ffc107 0%, #ffeb3b 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#lb::before {
  width: 100%;
  height: 20%;
  margin-left: -10%;
  background-color: #ffc107;
}

#lb::after {
  width: 20%;
  height: 20%;
  margin-left: 90%;
  margin-top: 70%;
  background-color: #ffeb3b;
}

#rb {
  border-radius: 0 0 100% 0;
  background: linear-gradient(45deg, #ffeb3b 0%, #00de07 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#rb::before {
  width: 100%;
  height: 20%;
  margin-top: -10%;
  background-color: #00de07;
}

#rb::after {
  width: 20%;
  height: 20%;
  margin-left: -10%;
  margin-top: 70%;
  background-color: #ffeb3b;
}

<div class="wrap-lg">
  <div id="lt" class="quarter"></div>
  <div id="rt" class="quarter"></div>
  <br>
  <div id="lb" class="quarter"></div>
  <div id="rb" class="quarter"></div>
  <div id="center"></div>
</div>

Answer 2

Если использовать возможности CSS3, то задача реализуется довольно просто (conic-gradient в помощь). Не PixelPerfect, но довольно близко:

function fSetPercents(ev) {
  let val = (typeof ev === 'object') ? ev.target.value : ev;
  let oWrap = document.querySelector('.wrap');
  oWrap.style.setProperty('--percent', val)
  oWrap.querySelector('.percent span').textContent = `${val}%`;
}
// Можно назначить функцию в обработчике
document.querySelector('[type="range"]').addEventListener('input', fSetPercents);
// Можно явно задать значение, передав число
fSetPercents(50);

body {
  margin: 0; min-height: 100vh;
  display: flex; justify-content: space-around; align-items: center;
}

.wrap {
  --percent: 50;
  display: flex; justify-content: center; align-items: center;
  height: 600px;
  width: 600px; /* или aspect-ratio: 1 / 1; */
  border-radius: 50%;
  background-image: radial-gradient( circle at center, #f5f6f8 50%, #0000 51%, #0000 60%, #f5f6f8 61%), repeating-conic-gradient( #f5f6f8 0deg 0.3deg, #8880 0.7deg 0.8deg, #f5f6f8 1.2deg 1.5deg), conic-gradient( #0000 calc(3.6deg * var(--percent)), #ced2d5 calc(3.6deg * var(--percent))), conic-gradient(#9ce5b0, #c6a967, #f00);
}

.percent {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  height: 350px;
  width: 350px; /* или aspect-ratio: 1 / 1; */
  border-radius: 50%;
  font: bold 100px sans-serif;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 5px 30px -10px #0004;
}

<div class="wrap">
  <div class="percent"><span>50%</span><input type="range"></div>
</div>

БЛОГ НА HUSL

Как реализовать такой градиент

Ответы (2 шт):