How to Create Color Gradient Borders in Elementor

Updated: August 8, 2022

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.

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

1 thought on “How to Create Color Gradient Borders in Elementor”

  1. Hi, great tutorial, thx for posting.. I was wondering if it is possible to have a gradient between sections, for example I would like to have section “bleed” into another section. So instead of seeing a hard horizontal separation between 2 sections, you would have a gradual merging of the 2 sections. Would appreciate it should you have any insights to achieving this. Thanks and best regards

    Reply

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.