How to Create Color Gradient Borders in Elementor

Wise people said that embracing our life and enjoying every moment will make our life meaningful because life doesn’t happen in extremes from 0 to 100%. It happens in between the gradient area. Alright, talking about gradient, the color gradient gradually blends from one color to another. The blending can occur between colors of the same tone, two different tones, or even between more than two colors.

Maybe you are wondering, “Is it possible to create a gradient border on your site?” Well, everything is possible in Elementor. With Elementor, you can add a color gradient border anywhere you want on your site (any widget and specific sections). This article will show you how to create color gradient borders in Elementor.

How to Create Color Gradient Borders in Elementor

First, before we start the tutorial, we would like to inform you that creating color gradient borders needs the help of Elementor’s Custom CSS feature, whereby the Custom CSS is only available on Elementor Pro. So, make sure you have upgraded to the Elementor Pro if you haven’t done so.

Alright, go to your Elementor editor and create a section with a single column.

Once you have chosen a column for your section, on the Edit Column settings, go to the Width, and set the width of the section to 700. Afterward, go to the Height and set the height to Min Height.

After editing the width and the height of the section, you need to add a widget to create color gradient borders on the widget. As we mentioned, you can add color gradient borders to any widget. In this example, we are adding the Heading widget. Select the Heading widget from the widget panel and drag and drop it into the canvas area.

Now, you can edit and style up the Heading text. Once you’ve edited and styled up the Heading, go to the Advanced tab and click on it. Add a margin to the section. In this example, we are adding 100 px of margin.

Now, it’s time to add the CSS snippet to your widget. Still, on the Advanced tab of Heading settings, go to the Custom CSS and click on it.

Next, paste the following snippet into the available field.

selector {
border-left: 2px solid #ADD112;
border-right: 2px solid #F0C3FB;
border-top: 2px solid #CE1919;
border-bottom: 2px solid #1FCEDB;
box-sizing: border-box;
background-position: 0 0, 0 100%;
background-repeat: no-repeat;
background-size: 100% 1px;
}

That’s it. As the image above shows, the widget now has color gradient borders. You can keep it like this if you are happy with the colors. But, if you want to change the colors for each border, you can see the following simple steps below:

• Go to the CSS snippet

• Change the initial color

You can change the initial colors for each border by replacing a hex color code or simply writing a color name (e.g., #197E13, green)

The Bottom Line

This article shows you how to create color gradient borders in Elementor. Creating a color gradient border is one way that can help your website be more attractive. However, we want to remind you that not every border is suitable as gradients. So, use color gradient borders only if you really need it.