If you are a WordPress user looking for inspiration on how to be different in showcasing your images, this article might be helpful for you. This article will show how to add a gradient border to images in the Elementor Gallery widget.
With the Elementor Gallery widget, you can easily show examples of the products or services you offer, your digital portfolio, and other things you want to show your users. Adding a gradient border to the images on your gallery is one of the options that you can try to make a stunning gallery.
Steps to Add Gradient Border to Images in Elementor Gallery
First, before we start the tutorial, we want to ensure that you’ve already upgraded to the Elementor Pro. Because the Gallery widget itself is only accessible on the Pro version.
Step 1: Add the Gallery Widget
Go to your Elementor editor, and we will start everything from scratch, so create a section with a single column. Afterward, select the Gallery widget from the widget panel and then drag and drop it into the canvas area. Once you’ve added the Gallery widget, you can edit and style up the widget to your preference.
Step 2: Add the CSS Snippet
Once you’ve edited and styled the Gallery widget, we will add a gradient border to the images on the Gallery widget by adding the simple CSS snippet. Go to the Advanced tab -> Custom CSS on the Gallery widget settings panel. Please copy the CSS snippet below, then paste it into the Custom CSS field.
selector .elementor-gallery-item
{
background-image:
linear-gradient(to right,#FEAC5e,#c779d0,#e60063,#12d0e6);
padding: 4px 4px 4px 4px;
}
The Code Explanation:
The code above selects the items on the Gallery widget using the selector .elementor-gallery-item Then, the gradient on the items/images applies by adding some properties and values inside the CSS. You can check the complete list of Elementor widget selectors here.
If you are happy with the multi-color gradient order applied to the images (as in the image above), you can keep it like this and save or publish your project if you want to. But if you want to customize it such as colors and padding size), you can edit the hex color codes and the padding values in the CSS snippet (see the image below).
If you want to create your own gradient, yet have no CSS knowledge, you can use online CSS generators such as CSS Gradient, Gradienta, and so on.
The Bottom Line
With Elementor Custom CSS, you can add CSS to every section, column, or widget; in this case, you can easily add a gradient border to images on the Gallery widget.
Adding a gradient border to your images on the Gallery widget might make your design looks more interesting but be careful about using gradient color design. Choose the right colors and make the transitions smooth. Because if you choose the wrong color and the color transitions are not smooth, your design will look annoying instead of attractive.
