If you are a WordPress user using Elementor to build your website, you must be familiar with the Progress Bar widget. We use this widget to show the data in a graphical design. This article might be helpful for you if you want to customize your Progress Bar widget more than Elementor has provided.
This article will show you how to create a gradient progress bar in Elementor without the help of any add-ons. By default, Elementor allows you to change the color of your progress bar (background and text). But there is no option to make it gradient.
Maybe you are wondering, “Is it possible to create a gradient progress bar in Elementor without the help of any add-ons?”. Well, this article will show you how to do that.

How to Create Gradient Progress Bar in Elementor without Add-on
Before we start the tutorial, we would like to inform you that to create a gradient progress bar in Elementor, we will need the help of the Elementor Custom CSS feature, which is only accessible on Elementor Pro. So, ensure that you’ve already upgraded to the pro version.
Alright, let’s get started!
Go to your Elementor editor, afterward select the Progress Bar widget from the widget panel, then drag and drop it into the canvas area. Once you’ve added the Progress Bar widget/s, you can edit and style up as you prefer.

On the widget settings panel, navigate to the Advanced tab -> Custom CSS. Please copy the CSS snippet below, then copy it into the Custom CSS field.
selector .elementor-progress-bar { background: rgb(7,149,238); background: -moz-radial-gradient(circle, rgba(7,149,238,1) 16%, rgba(37,252,255,1) 70%); background: -webkit-radial-gradient(circle, rgba(7,149,238,1) 16%, rgba(37,252,255,1) 70%); background: radial-gradient(circle, rgba(7,149,238,1) 16%, rgba(37,252,255,1) 70%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0795ee",endColorstr="#25fcff",GradientType=1); }

If you are happy with the multi-color gradient applied to your progress bar widget (as in the image above), keep it like this and save your project if you want to. But, if you want to customize it or maybe you want a different gradient for another progress bar widget, you can edit the CSS snippet more specifically on the declaration block of the CSS.
Declaration block CSS begins with a left curly brace (“{“) and ends when a matching right curly brace (“}“) is reached.

You can create a gradient using online CSS gradient generators such as Codioful and Coolors to get the declaration block. Once you finish creating the gradient, copy the CSS and replace the existing declaration block with a new one by pasting the CSS.

The Bottom Line
This article shows how easily you can create a gradient progress bar in Elementor without the help of any add-ons. The progress bar with a single color may look plain and boring. But be careful about creating a multi-color gradient to your progress bar.
Please pay attention to blending and mixing the color tones you use so that your progress bar doesn’t look weird and annoying. Because the primary purpose of creating the progress bar is to show the data and ensure the progress bar is clear and understandable to your users.
1 thought on “How to Create Gradient Progress Bar in Elementor (without Add-on)”
Hello
Just found this – and it’s amazing thanks a lot! Is there a way to make it so when the bar is Under 30% it is one colour and over 40% another etc?