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.

Did you try `radial-gradient` ? Can you reuse code from here https://stackoverflow.com/questions/67235098/how-to-create-semi-circle-ellipse-with-html-css-like-a-gauge-speedometer or https://stackoverflow.com/questions/64148997/how-to-create-a-curved-gauge-having-linear-gradient-as-background — kiranvj, Aug 03 '22 at 06:08

Irfanullah Jan · Answer 1 · 2022-08-03T06:47:43.967

1

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.

edited Aug 03 '22 at 06:47

answered Aug 03 '22 at 06:10

Irfanullah Jan

3,336
4
24
34

G-Cyrillus · Answer 2 · 2022-09-09T08:42:11.297

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>

@ChrisDsouza What do you mean, it is drawn via gradients (conic-gradient for the pieces of cake and a radial-gradient to blackish the center part) ? shadows are there only to draw kind of visual borders. Did I miss something in the question ? :) — G-Cyrillus, Sep 06 '22 at 06:38
here , i set a codepen to demonstrate how you could add a needle and animate it https://codepen.io/gc-nomade/pen/eYrNemK — G-Cyrillus, Sep 06 '22 at 06:51
Thats the thing, I dont want the borders. I want it to fade between each other at the intersections so the border is basically not visible. — Chris Dsouza, Sep 09 '22 at 08:19
okay, you mean that each colors should blend instead a sharp start/stop color ? (there is no border, beside the one around the half circle drawn via a shadow, so i do not clearly understand what you mean , the result from the snippet is very closed to your image) @ChrisDsouza Alike https://codepen.io/gc-nomade/pen/eYrNemK ? **Added a snippet with animation** — G-Cyrillus, Sep 09 '22 at 08:32

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

2 Answers2