Elementor Tip: Add Gradient to Circle Progress – Elementor Tutorial

Today I want to explain to you how to create a gradient circle progress on your WordPress website with free Elementor Page Builder and one of our WordPress Elementor themes. For this, you will need a widget called Circle Progress. You can get this widget and many others if you download and install JetElements plugin.

So let’s begin.

1. Open Elementor and search for the Circle Progress widget among the Elements.
2. Grab this widget and drop it in the center.
3. On the left, you will see three sections.
4. Go to the Content section to set the basic values.
5. In the Settings block, you will see three positions to edit the size: Circle Size, Value Stoke Width, and Background Stoke Width. Type in your own numbers and go to the next section.
6. In the Values block, you can change the current percentage.
7. Now, let’s go to the Style section.
8. Here you can change the progress line endings. They can be rounded or flat–it's up to you.
9. Then pay attention to the Value Stroke Type option. Here you can change the type of the progress color circle to be classic or gradient.
10. When choosing the second one, just grab a few colors that you want to assign to your gradient. You can combine any colors you wish just the same way you usually do with the gradient.
11. Also, you can adjust Value Stroke Angle and change the angle where this gradient goes.
12. Also, there is a way to change the Background Stroke Color - the part of the circle which is not filled with this progress. You can make it a gradient as well.
13. And that’s it - we have achieved a gradient in the progress circle.

Final Say

So now you know how to add a circle progress widget filled with a gradient pretty easily with the JetElements plugin. I hope you have enjoyed it. If you still have any questions - ask them below in the comments.

Read Also

Elementor From A to Z: Sheer Selection Of “How To” Tutorials

How to Set Up Blog Post Lists with Elementor Page Builder

A Step-by-Step Guide For Creating Gradient Overlay Using Elementor Blending Modes

How To Create Animated Text With Elementor Builder