This is a library of CSS code snippets for applying gradients to various Elementor elements. These code snippets add gradient design options not available within Elementor.
Note: For instructions and best practices, please refer to the How to Apply Code Snippets to Your MyListing Website guide.
Nav Widget
This adds a gradient to each menu item on hover and when the item is active.
selector li:hover .elementor-item, selector .elementor-item-active {
background: url(https://path-to-your-svg-file/filename.svg) padding-box fixed, linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%) border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: fit-content;
}Slides Widget
Ensure you have the ‘Background Overlay’ setting enabled for each Slide.
/* OVERLAY */
selector .elementor-background-overlay {
background: linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%);
opacity: .5;
}
/* BUTTON */
selector .elementor-slide-button {
border: 2.5px solid transparent;
background: url(https://path-to-your-svg-file/filename.svg) padding-box fixed, linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%) border-box;
}
selector .elementor-slide-button:hover {
opacity: .8;
}
Posts Widget
- Upload an SVG file with the background color you would like to apply to the Elementor widget.
- Add the code snippet to your website.
- Adjust Line 4 to include the path of your SVG file.
- Make other adjustments as desired.
/* BADGES */
selector .elementor-post__badge {
border: 2.5px solid transparent;
background: url(https://path-to-your-svg-file/filename.svg) padding-box fixed, linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%) border-box;
}
selector .elementor-post__badge:hover {
opacity: .9;
}
/* READ MORE */
.elementor-post__read-more {
text-transform: uppercase;
background: linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.elementor-post__read-more:hover {
opacity: .9;
}Icon Widget
selector .elementor-icon i:before, .elementor-icon svg:before {
background: -webkit-gradient(linear, left top, left bottom, from(#b57dff), to(#25eaed));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}Heading Widget Outline
- Upload an SVG file with the background color you would like to apply to the Elementor widget.
- Add the ‘egradientheadingborder’ CSS ID to the widget (Advanced Tab > CSS ID).
- Add the code snippet to your website.
- Adjust Line 4 to include the path of your SVG file.
- Make other adjustments as desired.
#egradientheadingborder .elementor-widget-container {
border: 2.5px solid transparent;
background:
url(https://path-to-your-svg-file/filename.svg) padding-box fixed,
linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%) border-box;
}Button Background
selector .elementor-button {
border: 2.5px solid transparent;
background:
linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%) border-box;
}
selector .elementor-button:hover {
opacity: .9;
}
Button Widget Outline
- Upload an SVG file with the background color you would like to apply to the Elementor widget.
- Add the code snippet to your website.
- Adjust Line 4 to include the path of your SVG file.
- Make other adjustments as desired.
selector .elementor-button {
border: 2.5px solid transparent;
background:
url(https://path-to-your-svg-file/filename.svg) padding-box fixed,
linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%) border-box;
}
selector .elementor-button:hover {
opacity: .9;
}
Call To Action Widget
- Upload an SVG file with the background color you would like to apply to the Elementor widget.
- Add the code snippet to your website.
- Adjust Line 18 to include the path of your SVG file.
- Make other adjustments as desired.
/* HEADING */
selector .elementor-cta__title {
background: linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* BORDER */
selector .elementor-widget-container {
border-left: 2.5px solid #b57dff;
border-top: 2.5px solid #7a73ff;
border-right: 2.5px solid #02bcf5;
border-bottom: 2.5px solid #25eaed;
}
/* BUTTON */
selector .elementor-cta__button.elementor-button {
border: 2.5px solid transparent;
background:
url(https://path-to-your-svg-file/filename.svg) padding-box fixed,
linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%) border-box;
}
selector .elementor-cta__button.elementor-button:hover {
opacity: .8;
}
Call To Action Widget Ribbon
- Upload an SVG file with the background color you would like to apply to the Elementor widget.
- Add the code snippet to your website.
- Adjust Line 4 to include the path of your SVG file.
- Make other adjustments as desired.
selector .elementor-ribbon-inner {
border: 2.5px solid transparent;
background:
url(https://path-to-your-svg-file/filename.svg) padding-box fixed,
linear-gradient(90deg, rgba(181,125,255,1) 0%, rgba(122,115,255,1) 33%, rgba(2,188,245,1) 67%, rgba(37,234,237,1) 100%) border-box;
}