How to add gradient to Progress Bar?

I have seen several watch faces on play store that have gradient in the complication progress bar.
I tried to do it by creating gradient image in graphics software but, the mask option is not visible when I’m trying to mask progress bar on gradient image.

Are you sure those you have seen, did have it on complication?
Could it no have been plain progress bar with fixed data source?

See the attached image. Both these are bars customisable complications and have gradient.

Hi, i dont see any gradient in your pic…only 2 shades of green. Anyway in wfs user complication masking cannot be done. The gradient u see is done with maybe apps like android studio.

Yes, the gradient is done with white colour gradually rising towards theme colour.
What a bummer, I hope they add this function this quarter.

hi, you could design a fixed complication/ designer complication instead.
using the progress bar element instead. and combine with tag expressions.
that one you can mask.

That way I can only add watch battery and steps. Not much to do there :confused:

You forgot heart rate…

I have heard that it doesn’t work (update) as expected

Hi, it does if you have the correct update. depending on watch. my gw 5 pro ok already. if you talking about HR tied to samsung health instead of continuous refresh.

it both case it is working as expected btw, it how you look at it.

not working as expected to me = not as it design to = giving wrong values.

I’ve tried for three days continuously but can’t seem to figure out how to create a complication with a gradient similar to the above. Tutorials for such would be greatly appreciated.

Hi, I did something like this, with a progressive bar and different colored gradients, but for the battery and for the steps. But regarding the complication bar I couldn’t do anything. I’ve attached an example of my bar in case it helps you. Save it and delete the .zip extension. (155.5 KB)

Thank you very much.

Hi you arent able to add gradients to complication type progress bar…as no grouping is allow with complication.

Only the designer progress bar can be done.
What u need is a picture that has a gradient. Then use it with masking technic.

So this for now is useful with available tags only

Mainly hr,battery and steps and any formula using these tags

It’s not possible to mask anything with the progress bar in Watch Face Studio

Hi @Shubham you giving wrong or incomplete info, it is possible the designer progress bar with images. Not the range complication…i can show you examples later

Not the circle complication progress bar i reapeat.

But it means u are limited to hr , steps and battery progress bar

The post is specifically regarding Progress Bars in the Complications and not just the Progress Bar with tags.

I thought Some are asking for progress bar in general… so need to make a distinction between the two. And what can be done or not whith either type.

And some are answering on how to work around the limitations

I and Mayalona did explain complication cannot but u could still do gradient progress bar with tags.

I also able to add a custom progress bar to replace the complication slot progress bar…(but with that u will face limitation too) if doing that set complication to fixed.

Good “hack” but the progress bar u put inside is hard coded to the tag u used. So match that with the same complication or set it to fixed…e.g fixed battery, steps or heart rate,


This one work around to your complication unable to mask with gradient mask.

create a gradient normal progress bar. (no tag just a image).

then layer your complication align above the progress bar you created.

next play around with opacity of both the progress bar.

  1. my custom progress bar is set at opacity 50%

  2. complications progress bar is set at 50% also

results is this.