WordPress Elementor ile Eğik Kart Efekti Yapımı

Eğik Efekt CSS

:root{
    --grad1: #00ccff;
    --grad2: #0e1538;
    --grad3: #d400d4;
}

selector{
    position: relative;
    z-index: 999;
}

/*Eğik Efekt*/
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;
}

Blur Efekti CSS

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

Hover Efekti CSS

/*HOVER*/
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));
}