How to Create Gradient Progress Bar in Elementor without Add-on

Updated: November 22, 2022

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 CSS gradient online tools to get the declaration block. Click here to see some CSS gradient tools that we recommend. 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 button. 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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.