In this tutorial, I’ll show you how to create a glowing gradient border in Elementor. This is one of those interesting effects you can add to your Elementor website and make it more stunning. For this, you won’t even need to install an extra plugin. All you need is Elementor Pro and I’ll show you how to add the small CSS code to achieve the glowing gradient effect as well as the gradient border.

Please note that the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Glowing Gradient Border Tutorial

Step 1: Creating a Page & a Section

First, you need to go to your Elemenor Dashboard, then go down to Pages, add a new page, give it a name and click on Edit with Elementor.

On this new page there’s no need to show the header so go to the settings icon at the bottom on the left, click on it. Then go up to Page Layout and change to Elementor Canvas.(00:35)

Add a new 3 column section then select the section.

Go left to Layout, give this section a Minimum Height of 100.

Now go back and select the section then go to Style and give it a background color of your choice.

Next, select the middle column and go to Style, give it a background color too, under background type.

Also Read: 5000+ Elementor Template Kits – Free and Premium

Step 2: Add Gradient Border

To add a glowing gradient border to your column you need to use Custom CSS, remember this is only possible if you have Elementor Pro, and here you’re going to use a Custom CSS code to achieve this. 

Note: You can get CSS gradients from css gradient.io

When you open this site, you can go to the Backgrounds option on the menu, click on it, then go to Grabient and it gives you a bunch of beautiful gradient options to choose from. (02:43)

Find the gradient that suits you, copy it (copy option is in the upper left corner when you hover on the gradient square)

Go back to your editor and paste it. 

CSS to apply gradient to the border and background blur

selector { border: 5px solid transparent;
  border-image: linear-gradient(45deg, red , yellow);
  border-image-slice: 1;
  height: 55vh;
 } 

selector::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
background: linear-gradient(45deg, #ddd800, #cc5520, #750cf2, #0cbcf2);
  filter: blur(80px);
}

In your editor, select the column

Go to Advanced and under Custom CSS and add/paste the CSS snippet (01:49)

This code adds a Selector(s)

The first selector is to give the column a border of 5 pixels, you can even make it bigger if you want. it’s also giving it a 45-degree linear-gradient red and yellow (you can change the color too if you want). It also gives the column height of 55vh.

Selector two is applying the gradient, that is, by adding a background with a linear gradient.

It gives it a filter blur of 80px (you can change it to your preference)

When you go back to the gradient site and choose your new gradient code;

You can first paste your new gradient below the existing one then edit out what you don’t want, in this case, I don’t want the background color or image. I just want the linear gradient. Copy the new linear gradient code and paste it to replace the existing one in the code.

To Read: How to Make Glassmorphism Forms in Elementor [PRO]

Adding an Image Widget to the Glowing Gradient Border Column

You can also add a widget to the section by going over to the widgets icon (03:26)

This brings up the widgets menu, find the image widget and drag it to your column, then you can select an image you want to place there. (03:39)

You can also make the background transparent and remove the background color, and you can as well change the height in custom CSS.

To remove the gap that’s between the image and the border you can select the section: 

Got to Layout and under Column Gap just say no gap. This removes the gap. 

However, when you go to Preview you’ll realize the image is now going a bit out of the border. (04:26) To rectify this and make your column match your image widget:

Select the column and go to Advanced

Under advanced you need to go down to your Custom CSS code and delete the height option from the code (04:37) 

This will automatically adjust to the height of the image widget to match the column. (04:49)

So that’s how you can have an image widget in your column. 

But we’re not going to use the image widget, just delete it and go back to the original column demo.

Select the column and add the height property you earlier deleted with 55vh.

Since you had removed the background and made it transparent for the purpose of the image widget, now you put it back by going to the Style option, give it the background color of your choice then publish. (05:15)

Glowing Gradient Border Column Responsive Settings

Under this option, you can adjust your settings so that your column can be viewed on different devices. To do this:

First, go back to your editor. At the bottom of the Edit Section select the Responsive Mode icon.

Then go over and choose the Tablet device, this view looks just fine and you don’t have to change anything (05:32)

However when you go over to the mobile device this is how it looks, it needs a few changes.(05:36)

To make the necessary changes select the main section and go to Advanced, go under Padding and first unlink values, then add 40px on the right and 40px for the left padding.

Update and your column looks great on both tablet and mobile devices. (05:57)  

That’s how you make a glowing gradient border and make your site more interesting and eye-catching. You can apply gradient borders to sections, columns, elements and widgets. 

If you enjoyed this tutorial, don’t forget to subscribe to my youtube channel for more interesting and helpful tutorials.