3D shadow

Hi there!
is it possible to set a 3d shadow like the one in the attached file to a image inside a widget?
I have a banner in my sidebar and i would like to apply it a 3d shadow in the corners.

Is that possible?
thank you very much

attached image is here sorry!

Attachments:

You must be logged in to view attached files.

Hello,

We need to inspect the element on the site to provide you with custom CSS.

Best Regards

Ok here you have the credentials

Hello,

Add this code to the Theme Settings > Custom CSS > Global:

.sidebar-container .promo-banner-wrapper {
    position: relative;
}
.sidebar-container .promo-banner-wrapper:after,
.sidebar-container .promo-banner-wrapper:before {
        content: "";
    position: absolute;
    -webkit-box-shadow: 0 15px 10px rgba(0,0,0,.6);
    box-shadow: 0 15px 10px rgba(0,0,0,.6);
    left: 5px;
    right: 50%;
    bottom: 8px;
    height: 30%;
    border-radius: inherit;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: skewY(-6deg);
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
}
.sidebar-container .promo-banner-wrapper:after {
        left: 50%;
    right: 5px;
    -webkit-transform: skewY(6deg);
    -ms-transform: skewY(6deg);
    transform: skewY(6deg);
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
}
.sidebar-container .promo-banner {
    z-index: 1;
}

Best Regards

Wow! It works perfectly!! THANK YOU!!!!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts