Claymorphism effect using Elementor | Elementor Tutorial

Claymorphism effect for services section in Elementor code snippets is given below:

Inner Section column code:

selector .elementor-widget-wrap{
    background: #FFFFFF;
box-shadow: inset 12px 12px 15px #EAF0FF3D, inset -12px -12px 24px #BFE0FF;
}
selector:hover .elementor-widget-wrap{
    background-color: #ffffff75!important;
}

Button Code:

selector.clay-btn .elementor-button{
box-shadow: inset 8px 8px 15px #8AC6FF, inset -12px -12px 24px #006CD1;
}
selector:hover.clay-btn .elementor-button{
box-shadow: inset 8px 8px 15px #8AC6FF, 4px 4px 8px #8AC6FF, 6px 6px 10px #006CD1;
}

Share On

Facebook
Twitter
Pinterest
LinkedIn
Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.
On Key

Related Posts