Need to put gradient in a semi circle (Not left to right, but like pizza slices)

Question

Hi I am trying to make a speedometer with gradient colours. My current code gets gradient colours, but its left to right. Standing gradient - Wrong

I don't want the gradient that is in the vertical order. I want it to curve and fade.

Code:

 .gauge {
            font-family: Arial, Helvetica, sans-serif;
            background-color: red;
            background-image: linear-gradient(to right , red , orange , yellow , green);
            box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29);
            width: 200px;
            height: 100px;
            border-radius: 100px 100px 0 0;
            position: relative;
            overflow: hidden;
            /* safari fix */
            -webkit-transform-style: flat;
            -webkit-transform: translateZ(0px);
        }

<div class="gauge"></div>

What i am trying to achieve is a gradient of pizza pieces.

Answer 1

A mix of radial and conic gradients might also do, here a possible example:

.gauge {
  font-family: Arial, Helvetica, sans-serif;
  background: 
  /*black part */radial-gradient( circle at bottom center, black 59px, #5555 , transparent 65px),
  /*pizza's pieces*/conic-gradient( from 4.7rad at 50% 100%, #39ab5e 0deg 36deg, #9ca92e 36deg 72deg, #eec22a 72deg 108deg, #e07b27 108deg 144deg, #e2443c 144deg);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29);
  width: 200px;
  height: 100px;
  border-radius: 100px 100px 0 0;
  position: relative;
  overflow: hidden;
  /* safari fix */
  -webkit-transform-style: flat;
  -webkit-transform: translateZ(0px);
}

/* demo purpose*/
html {
  min-height: 100vh;
  display: grid;
}

body {
  background: #3D1873;
  margin: auto;
}

.gauge {
  color: white;
  display: grid;
  align-items: end;
  justify-content: center;
  font-size: 1.7em;
  line-height:2.75
}

<div class="gauge">BIM</div>

colors blending

.gauge {
  font-family: Arial, Helvetica, sans-serif;
  background: 
  /*black part */radial-gradient( circle at bottom center, black 59px, #5555 , transparent 65px),
  /*pizza's pieces*/conic-gradient( from 4.7rad at 50% 100%, #39ab5e 0deg 36deg, #9ca92e 36deg 72deg, #eec22a 72deg 108deg, #e07b27 108deg 144deg, #e2443c 144deg);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29);
  width: 200px;
  height: 100px;
  border-radius: 100px 100px 0 0;
  position: relative;
  overflow: hidden;
  /* safari fix */
  -webkit-transform-style: flat;
  -webkit-transform: translateZ(0px);
}
/* colors blending to next */
.gauge ~ .gauge {
   background: 
  /*black part */radial-gradient( circle at bottom center, black 59px, #5555 , transparent 65px),
  /*pizza's pieces*/conic-gradient( from 4.7rad at 50% 100%, #39ab5e , #9ca92e  36deg, #eec22a  72deg, #e07b27  108deg, #e2443c 144deg );
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.09), 0 0 35px 5px rgba(255, 255, 255, 0.29);
}
/* demo purpose*/
html {
  min-height: 100vh;
  display: grid;
  text-align:center;
  color:white;
}

body {
  background: #3D1873;
  display:flex;
  margin: auto;
}

.gauge {
  margin:1em;
  color: white;
  display: grid;
  align-items: end;
  justify-content: center;
  font-size: 1.7em;
  line-height:2.75;
  flex-shrink:0;
}

.gauge:before {
  content:'';
  position:absolute;
  bottom:-3px;
  left:20px;
  width:80px;
  height: 6px;
  background:linear-gradient(to left , transparent 55px, black 55px);
  border-radius:50%;
  box-shadow:3px 2px 2px #555;
  clip-path: polygon(-10px -10px, 20px -10px, 20px 10px, -10px 10px);
  transform-origin:center right;
  transform:rotate(90deg);
  animation: 4s rot infinite alternate;
}
@keyframes rot{
  15%, from {transform:rotate(0deg)}
 
  90%, to {transform:rotate(180deg)}
}

.gauge ~.gauge:before {
  animation-play-state:paused;
}
.gauge ~ .gauge:hover:before {
  animation: 4s rot infinite alternate;
}

<div class="gauge">BIM</div>
Next: animation paused<br> 
hover to play animation
<div class="gauge">BIM</div>

Answer 2

This can be achieved using conic-gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient

.conic-gradient {
  width: 150px;
  height: 150px;
  background: conic-gradient(from 180deg, blue, green, yellow, orange, red);
  border-radius: 100%;
}

<div class="conic-gradient">
<div>

You need to tweak it to your needs.