CSS Code To Add Gradient Border To Any Element in Elementor

Written by :

Posted on :

Tags :

Share :

Facebook
Twitter
LinkedIn
Reddit
Pinterest

What This CSS Code Does:

Adds a gradient border to any element in Elementor.

Usage Examples:

Elementor Button (style 1)
Icon Box (style 2)

Schedule A Call

How To Implement:

Go to the specific element, click on the Advanced tab within the Elementor element, go down to the Custom CSS option and paste the code. That’s it!

The Code:

(style 1)
				
					selector {
      border: 1px solid;
      border-image: linear-gradient(to right, white, transparent) 1;
}
				
			
(style 2)
				
					selector  {
    border: 1px solid;
    border-image: linear-gradient(to bottom, transparent,white, transparent) 1;
}
				
			

One Response

  1. This is a pretty sweet and elegantly simple little snippet. The one downside is, it doesn’t seem to work with border-radius.

Leave a Reply

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

READY FOR A TOTALLY AWESOME WEBSITE?