Custom Icon Box WordPress Elementor tutorial

Facebook
Email
WhatsApp

CSS CODE

				
					selector .card{

    box-shadow: 0 10px 0px rgba(255,255,255,25), inset 0 -15px 0 rgba(255,255,255,0.25), 0 45px 0 rgba(0,0,0,0.25);

}

selector .card:before{

    content:"";

    width: 100%;

    height: 120%;

    background: linear-gradient(90deg,transparent, rgba(255,255,255,0.2));

    position: absolute;

    top: -140px;

    left: -35%;

    pointer-events: none;

    filter: blur(5px);

    transform: rotate(35deg);

    border-radius: 0px;

}

selector .icon-section .elementor-widget-container{

    height: 120px;

    box-shadow: 0 10px 0px rgba(0,0,0,0.25), inset 0 -8px 0 rgba(255,255,255,25);

}

selector .icon-section{

    position: relative;

}

selector .icon-section:before{

    content: "";

    width: 50px;

    height: 50px;

    left: -50px;

    background: transparent;

    border-radius: 0px 50px 0px 0px;

    box-shadow: 15px -15px 0px 15px  ;

    position: absolute;

}

selector .icon-section:after{

    content:transparent "";

    width: 50px;

    height: 50px;

    right: -50px;

    background: transparent;

    border-radius: 50px 0px 0px 0px;

    box-shadow: -15px -15px 0px 15px ;

    position: absolute;

    top: 0;

}

selector .icon-section .elementor-icon i{

    z-index: 2;

}
				
			
Hostinger domain & hosting ireland