So I have this gauge in an iOS app that has a linear gradient from left to right on on arc inside of it like this

correct gague

That works well when I only need the gradient to stop in the middle, but when I want to shift the gradient back a little bit, as you can see, it bleeds the upper green part into to the lower part of the dial since it's only linear and those sections overlap.

gague incorrect

My question is this:

Which kind of gradient should I use that would rotate colors around a circle?

I know it's not radial, because that would have the same color on the axis in which I am drawing it on.

  • 2
    what software are you using? This is a snap in Adobe Illustrator. – Vincent May 8 '15 at 16:07
  • @RandyJones Oddly enough this is actually being drawn in code, but nonetheless, this snap thing, does it snap the gradient to a path? Or what exactly does it do? – Micaiah Wallace May 8 '15 at 16:10
  • I meant to say that it's very easy to do, as in 'done in a snap' :) And yes, it's possible in Illustrator to give a path a gradient. Are you using css to draw this? It might be an idea to include in your question what you're using. – Vincent May 8 '15 at 16:14

The term you a re looking for is an angle gradient. This plots the gradient along a circular path and fills the area with it. Lots of image desgin software (like Photoshop) will allow you to make one.

angle gradient example

In your case, I'd create one that has the 'split' on the bottom, as in the image.

An alternative in vector software (like Adobe Illustrator) would be to have a gradient stroke, applying a gradient to a path:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.