How to Make a Glowing Gradient Border in Elementor [PRO]

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)

v5anmwEN5rF70c txFJ22X0zj9VX5mTeMbCmwL2HezcTAe1w8His70Lj32pUubAKC5 NdISaEWApMp09J07lXQr6qiMcBVsVVLwHa9PsBbmc8

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)

Jna3SjNA0V6taHwIRBmc6xxxWWxAU8uz43mHRWY pQtKpm

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)

qLBktl9tU2CYRBDIroYJIEpAV3tFpbpLclyIYMDi8K bilQd1YKg57 iGm3Epbn B06tkscMidiS3M Nn6Ui MxFg9gw0xZr4zKjh XmRMRk7WQsXkCuMAK8XVtaH0I dfKs6 0o

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)

8PBG R5ah2jajZlXDK8Jl3D9QoRuLVNV9 wddvK3vmA7kIx9bmOgDICMdf3lRgIDoc2x5SaZKaTO442il 0XFKwhw8BnyGevgEpg3y67NEH1AcTfjXM2qgLm4p4ZycVhMnKgS8Gm

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)

Nlq9HFt8kGXPhQJx RvcD9BO mFAVncogr0NCgKwrA Sc9o3zy NvM8pLJSE hfUz4B7LcllF19WpJSoUuHSHAlrd 6gqBWZyRScLOXTAlezzkzY8OThKlfC1A s84Ew3Rg9i4Dh

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:

qsO2LAqkTSEyp6GImq ylQfbFex5Ms8REcGG ZfGl2P xwYcZe3oerilSBIc0z6W8EJmy5JyFUPe1fz2H8NrxyDeeZPH6TS5mf0 t C66Qw1a6K W1wU0oqiCMOSD01I3SbTvY

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) 

lB ieIpW4HE4ZyRyjeQRjCysJy7Sfv3kG4lNBoxu04s9ZJqm9Y7dsWno3eO5JbzLg 7 9INMlzpSVE8 RSR46UejxGvFOD1C93FBijvOFzmsOkbk dbkLpMfUseyC4Bb5 Mlu9

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

itVMPNUJI32JgkPtE1NSLT9GzYi65RyhOLJMXFhYebwHvriMF7Jtl3U3UPtAvOQlV lnothS2iBgovgPgqw0W9dS3T

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)  

glowing gradient border column responsive

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users