Elementor Ribbon Effect – 3D Ribbon

Want to spice up the flat ribbons in Elementor? Add a simple 3d effect using CSS!

The ribbon is commonly used to highlight call to actions and pricing widgets in Elementor with sales, important notes, or adding focus to a specific widget.  The ribbons by default are a bit plain but we can add some simple CSS to add dimension to the ribbons. 

Before
After

Step 1: Size & Overflow your ribbon

To get the corner/overlay 3d effect we need to go beyond the widget’s box.  By default Elementor hides anything going beyond the box using overflow: hidden. If using a CTA widget, add this CSS code to the Advanced -> Custom CSS:
selector .elementor-widget-container, .elementor-cta{
overflow: visible;
}
If using a pricing widget, add this CSS code to the Advanced -> Custom CSS:
selector .elementor-widget-container{
overflow: visible;
}
Next size your ribbon.  We’ll be setting the ribbon to an absolute position so we can move it within (and beyond) the container widget’s box.  Add this CSS code to your widget.  Change the pixel value to match the size ribbon you want, we’re going with 8px here.  The bigger/thicker your ribbon the more negative positioning you would want to add.
selector .elementor-ribbon-left {
position: absolute;
top:-8px;
left: -8px;
overflow: hidden;
}

NOTE:  change the "left" to "right" if your ribbon is on the right side of your widget.

Now you can see our ribbon is going beyond the box

Step 2: Add our corners

Next we need to add some corners to the ribbons to make it appear as if the ribbons are folding under the widget. For our top corner add this CSS.  We have to add a blank content to make a new element to add CSS to using the pseudo class before to put it in front of the actual ribbon.  We add a border to this new element and move it with our positioning into the correct spot.  You may need to adjust your LEFT amount into the correct position if you aren’t using the same size ribbon as our example.
selector .elementor-ribbon-left::before
{
position: absolute;
content: '';
border: 4px solid #4ca362;
left:80px;
z-index: -1;
}
Do the same for the bottom corner, add this CSS
selector .elementor-ribbon-left::after
{
position: absolute;
content: '';
border: 4px solid #4ca362;
top:80px;
z-index: -1;
}

That's it! See the full code for copying below as well as live examples.

For pricing widget:
/* Ignite Web Design 3d Ribbon Corners - https://igniteweb.design */

selector .elementor-widget-container {
overflow: visible;
}
/* ribbon overlay */
selector .elementor-ribbon-left {
position: absolute;
top:-8px;
left: -8px;
overflow: hidden;
}

/*top ribbon corner */
selector .elementor-ribbon-left::before
{
position: absolute;
content: '';
border: 4px solid #4ca362;
left:80px;
z-index: -1;

}

/*bottom ribbon corner */
selector .elementor-ribbon-left::after
{
position: absolute;
content: '';
border: 4px solid #4ca362;
top:80px;
z-index: -1;
}
For CTA widget:
/* Ignite Web Design 3d Ribbon Corners - https://igniteweb.design */

selector .elementor-widget-container, .elementor-cta{
overflow: visible;
}
/* ribbon overlay */
selector .elementor-ribbon-left {
position: absolute;
top:-8px;
left: -8px;
overflow: hidden;
}

/*top ribbon corner */
selector .elementor-ribbon-left::before
{
position: absolute;
content: '';
border: 4px solid #4ca362;
left:80px;
z-index: -1;

}

/*bottom ribbon corner */
selector .elementor-ribbon-left::after
{
position: absolute;
content: '';
border: 4px solid #4ca362;
top:80px;
z-index: -1;
}

This is the heading

Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Ribbon!

I am title

I am subtitle
$ 39
99
Monthly
  • List Item #1
  • List Item #2
  • List Item #3
Popular

Our tutorial is offered free as a guide for use on your website and may be used commercially for client use as well.  No attribution is necessary to use our code in production websites, however you may not re-post or redistribute our code in any way without permission.

Share Me!

Share on facebook
Share on google
Share on twitter
Share on email
We use cookies to ensure that we give you the best experience on our website including downloads and analytics. By continuing to use our page you are accepting use of cookies listed in our privacy policy.