多彩磨砂质感图

原理

多块不规则渐变背景 + 高斯模糊蒙版

<div class="g-bg">
    <div class="g-polygon g-polygon-1"></div>
    <div class="g-polygon g-polygon-2"></div>
    <div class="g-polygon g-polygon-3"></div>
</div>

.g-bg {
    position: relative;
    width: 100vw;
    height: 100vh;
    
    & > div {
        position: absolute;
        opacity: .5;
    }
    /* backdrop-filter: blur() 进行高斯模糊处理 */
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        backdrop-filter: blur(150px);
        z-index: 1;
    }
}

.g-polygon-1 {
    bottom: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 714px;
    height: 390px;
    background: linear-gradient(#ffee55, #fdee99);
    clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
}

.g-polygon-2 {
    bottom: 0px;
    left: 30%;
    transform: translate(-50%, 0);
    width: 1000px;
    height: 450px;
    background: linear-gradient(-36deg, #E950D1, #f980D9);
    clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
}

.g-polygon-3 {
    bottom: 0px;
    left: 70%;
    transform: translate(-50%, 0);
    width: 1000px;
    height: 450px;
    background: rgba(87, 80, 233);
    clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
}