Template:Salty/effect.css

.effect {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(lightblue, darkblue); /* background moved into CSS, adjustments must be made here for the template itself, probably wasn't needed leak at me if you want it back in template */
    box-shadow: inset 0 0 8px black;
    filter: drop-shadow(0 1px 5px #163a70);
}
.effect::before,
.effect::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 2px;
    height: 2px;
    background: #F3FAFD;
    border-radius: 50%;
}
/* 25 random salt particles */
.effect::before {
    left: 15px;
    top: 30px;
    box-shadow:
          8px -10px #F3FAFD,
         33px  56px #F3FAFD,
         54px  15px #F3FAFD,
         80px -21px #F3FAFD,
        117px  41px #F3FAFD,
        142px   4px #F3FAFD,
        174px  65px #F3FAFD,
        205px  -9px #F3FAFD,
        230px  30px #F3FAFD,
        267px  51px #F3FAFD,
        302px -16px #F3FAFD,
        329px  22px #F3FAFD,
        364px  61px #F3FAFD,
        405px   0 #F3FAFD,
        433px  46px #F3FAFD,
         -3px  24px #F3FAFD,
         44px -23px #F3FAFD,
         72px  68px #F3FAFD,
        153px  31px #F3FAFD,
        189px -19px #F3FAFD,
        245px   9px #F3FAFD,
        318px  55px #F3FAFD,
        377px -13px #F3FAFD,
        441px  18px #F3FAFD;
    animation: salt-a 9s linear infinite;
}
/* another 25 random salt particles */ /*akhsually its pseudo random and I couldn't be bothered to pick the spots so the locations below are vibecoded */
.effect::after {
    left: 30px;
    top: 45px;
    box-shadow:
        -28px  17px #F3FAFD,
          4px  51px #F3FAFD,
         48px -20px #F3FAFD,
         80px   8px #F3FAFD,
        112px -32px #F3FAFD,
        145px  32px #F3FAFD,
        176px  -5px #F3FAFD,
        222px -41px #F3FAFD,
        236px  52px #F3FAFD,
        271px  -1px #F3FAFD,
        304px  26px #F3FAFD,
        338px -22px #F3FAFD,
        366px  14px #F3FAFD,
        401px  50px #F3FAFD,
        427px  -8px #F3FAFD,
        -13px -16px #F3FAFD,
         31px  28px #F3FAFD,
         70px -35px #F3FAFD,
        121px  43px #F3FAFD,
        163px -25px #F3FAFD,
        207px  22px #F3FAFD,
        258px -39px #F3FAFD,
        316px  47px #F3FAFD,
        380px -31px #F3FAFD;
    animation: salt-b 11s linear infinite;
}
@keyframes salt-a {
    0% {
        transform: translate(0, 0);
    }
    15% {
        transform: translate(2px, -2px);
    }
    30% {
        transform: translate(5px, -1px);
    }
    45% {
        transform: translate(6px, 2px);
    }
    60% {
        transform: translate(4px, 5px);
    }
    75% {
        transform: translate(1px, 6px);
    }
    90% {
        transform: translate(-2px, 2px);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes salt-b {
    0% {
        transform: translate(0, 0);
    }
    15% {
        transform: translate(-2px, 2px);
    }
    30% {
        transform: translate(-4px, 5px);
    }
    45% {
        transform: translate(-1px, 7px);
    }
    60% {
        transform: translate(2px, 6px);
    }
    75% {
        transform: translate(5px, 3px);
    }
    90% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0, 0);
    }
}