[Share] Torn Paper Effect

You can follow these steps to create a torn paper effect.

If CSS code doesn't work, you can send page url, I will check again.

#1. First, find Section ID.

If we apply torn paper to Section A, wee will need to find the ID of the section located right below Section A.

In my example, it is:

section[data-section-id="673d9ea6a5c0716bf1346f46"]

#2. Use this code to Custom CSS box

section[data-section-id="673d9ea6a5c0716bf1346f46"] {
    .section-background {
    overflow: visible;
}
.section-background:before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0;
    background: inherit;
    -webkit-mask: url(https://static1.squarespace.com/static/66667502be600c16ccc48b50/t/66a997764d370b5e673fb08d/1722390390547/SWA-divider-1.svg) bottom no-repeat;
    mask: url(https://static1.squarespace.com/static/66667502be600c16ccc48b50/t/66a997764d370b5e673fb08d/1722390390547/SWA-divider-1.svg) bottom no-repeat;
    margin-top: 153px;
    transform: translatey(-100%);
    position: absolute;
    pointer-events: none !important
}
@media screen and (max-width: 800px) {
   .section-background:before {
        -webkit-mask-size:300% 50%;
        mask-size: 300% 30%;
    }
}}

#3. Result

Desktop

Mobile