Elementor Skewed Effect

Skew Effect Elementor

CSS Code for Skewed Effect

				
					    :root{
        --grad1: #00ccff;
        --grad2: #0e1538;
        --grad3: #d400d4;
    }
    selector{
        position: relative;
        z-index: 999;
    }
    /*SKEWED EFFECT*/
    selector::before, selector::after{
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        -webkit-transform: skewX(2deg) skewY(4deg);
                transform: skewX(2deg) skewY(4deg);
        background: -webkit-linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
        background: linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
        z-index: -9;
    }
				
			

CSS Code for Skewed Blur Effect

				
					    /*BLUR EFFECT*/
    selector::after{
        -webkit-filter: blur(50px);
                filter: blur(50px);
    }
				
			

CSS Code for Skewed Hover Effect

				
					    /*HOVER EFFECT*/
    selector:hover::before, selector:hover::after{
         background: -webkit-linear-gradient(315deg, var(--grad1), var(--grad2), var(--grad3));
         background: linear-gradient(135deg, var(--grad1), var(--grad2), var(--grad3));
    }
				
			

Share:

More Posts

Send Us A Message